HTML Tables

Example: HTML Tables

Tables, be they created in Microsoft Word, Microsoft Excel, or HTML for web pages, are used to organize data into rows and columns.

Example: Basic HTML Table

Below is a 3 column by 2 row table.


        <table>
            <tr>
                <th>Employee Name</th>
                <th>Title</th>
                <th>Salary</th>
            </tr>
            <tr>
                <td>Ali Bazzi</td>
                <td>CEO</td>
                <td>$185,000</td>
            </tr>
            <tr>
                <td>Mary Smith</td>
                <td>Director</td>
                <td>$87,500</td>
            </tr>
        </table>
	

Example: Basic HTML Table with caption, header and footer

Below is a 3 column by 2 row table. Several additional tags have been added to this table.

  • The caption tag acts like a table heading and is read by screen readers for accessibility
  • The table header tag (thead) is used for table header data. It can be used in conjunction with CSS to enable scrolling of the table body independently of the header and footer as well displaying at the top and bottom of a page when printing across multiple pages.
  • The table footer tag (tfoot) is used for table footer data. It can be used in conjunction with CSS to enable scrolling of the table body independently of the header and footer as well displaying at the top and bottom of a page when printing across multiple pages.

       <table>
            <thead>
			<tr>
                <th>Employee Name</th>
                <th>Title</th>
                <th>Salary</th>
            </tr>
			</thead>
			<tfoot>
			<tr>
                <th></th>
                <th>Total</th>
                <th>$272,500</th>
            </tfoot>
			<tbody>
            <tr>
                <td>Ali Bazzi</td>
                <td>CEO</td>
                <td>$185,000</td>
            </tr>
            <tr>
                <td>Mary Smith</td>
                <td>Director</td>
                <td>$87,500</td>
            </tr>
			</tbody>
        </table>
	

Output:

screenshot of HTML table example

Example: HTML Table with colpsan

The colspan attribute of table cells is used to span a column more than one one column in a row. It is similiar to the "merge and center" feature of Microsft Excel, without the center (i.e. it merges two cells). It should be noted a single HTML table needs to have the same number of coiumns in each row (or a number of columns that adds up to the same number when colspans are included) in order to validate at the W3C.


        <table>
            <thead>
			<tr>
                <th>Employee Name</th>
                <th>Title</th>
                <th>Salary</th>
            </tr>
			</thead>
			<tfoot>
			<tr>
                <th></th>
                <th>Total</th>
                <th>$272,500</th>
            </tfoot>
			<tbody>
            <tr>
                <td>Ali Bazzi</td>
                <td>CEO</td>
                <td>$185,000</td>
            </tr>
	         <tr>
                 <td>Harold Foster </td>
                 <td colspan="2">Not Yet Known </td>
             </tr>
            <tr>
                <td>Mary Smith</td>
                <td>Director</td>
                <td>$87,500</td>
            </tr>
			</tbody>
        </table>
	 

Output:

screenshot of HTML table example