HTML Tables

HTML/HTML Tables

Tables

HTML tables allow web developers to arrange data into rows and columns.

A table represents information in a grid format. Examples of tables include financial reports, TV schedules, and sports results.

• The <table> element is used to create a table. The contents of the table are written out row by row.

• <tr> Indicate the start of each row using the opening <tr> tag. (The <tr>  stands for table row.) It is followed by one or more <td> elements (one for each cell in that row). At the end of the row you use a closing tr> tag.
• <td> Each cell of a table is represented using a <td> element. (The td stands for table data.) At the end of each cell you use a closing td>  tag.

Example:

Table Headings

The <th>  element is used just like the  <td>  element but its purpose is to represent the heading for either a column or a row. (The <th> stands for table heading.) Even if a cell has no content, you should still use a <th>   or <td>   element to represent the presence of an empty cell otherwise the table will not render correctly. (The first cell in the first row of this example shows an empty cell.) Using elements for headings helps people who use screen readers, improves the ability for search engines to index your pages, and also enables you to control the appearance of tables better when you start to use CSS. You can use the scope attribute on the element to indicate whether it is a heading for a column or a row. It can take the values: row to indicate a heading for a row or col to indicate a heading for a column. Browsers usually display the content of a element in bold and in the middle of the cell.

Example:

Spanning Columns

The colspan attribute can be used on a <th> or <td> element and indicates how many columns that cell should run across. 

Example:

Spanning Rows

You may also need entries in a table to stretch down across more than one row. The rowspan attribute can be used on a  or   element to indicate how many rows a cell should span down the table.

Example:

<table>

 <tr>

 <th></th>

 <th>1</th>

 <th>2</th>

 </tr>

 <tr>

 <th>6pm - 7pm</th>

 <td rowspan="2">Travl</td>

 <td>News</td>

 </tr>

 <tr>

 <th>7pm - 8pm</th>

 <td>Sport</td>

 <td>History</td>

 </tr>

</table>

Long Tables

There are three elements that help distinguish between the main content of the table and the first and last rows (which can contain different content). These elements help people who use screen readers and also allow you to style these sections in a different manner than the rest of the table.

• The headings of the table should sit inside the  <thead> element. 
• The body should sit inside the  <tbody>   element.
• The footer belongs inside the  <tfoot> element. 

By default, browsers rarely treat the content of these elements any differently than other elements however designers often use CSS styles to change their appearance.

Example:

Summary of HTML Tables

• The <table> element is used to add tables to a web page.
• A table is drawn out row by row. Each row is created with the   <tr> element.
• Inside each row there are a number of cells represented by the   <td>  or  <th> element.
• You can make cells of a table span more than one row or column using the rowspan and colspan attributes.
• For long tables you can split the table into a <thead> ,<tbody> , and tfoot> .