The <table> Element
The <table> element is a powerful tool for web designers:
- Tables allow us to display information in a predictable and uniform fashion on a web page.
- Tables are well suited for presenting data that conforms to rows and columns.
- Content in table cells is easy to format consistently.
In the past, tables were often used to lay out and organize an entire web page. This was a misuse of the <table> element, which should be used only to present specific information within a page’s overall content.
Rows and Columns
|<table> </table>||Establishes the table on the web page.|
|<tr> </tr>||Defines a new table row, which spans
the available width of the table.
|<td> </td>||Defines a cell of table data within a row.
The <td> cells will evenly share the
horizontal space in a row.
If there is just one <td> element in a row,
it will use the entire width available.
Defining a Border
By adding the border=”1″ attribute to the table element, browsers will display the table with vertical and horizontal borders around each cell. This makes the table a bit easier to view.
Specifying Table Headers
If the text in our top row is meant to serve as column labels for the data below, we can use the <th> (“table header”) element instead of regular <td> elements. This informs the browser to automatically bold and center the text.
Spanning Rows and ColumnsExample: Spanning Columns
We can build a data cell that spans more than one column by using the colspan attribute:The value placed in the colspan attribute informs the browser how many columns to combine into a single data cell.
Adding a Table CaptionTo add a caption to the table, we use the <caption> element immediately after the opening <table> tag. The text enclosed within the <caption> element will be displayed above the table and centered.