Tables are used on webpages to display tabular data (think of the kind of information you’d normally see displayed in a spreadsheet, with headings for each column, and possibly also the first column including text that labels that row, explaining what that data is). Before advances were made in CSS and before responsive design became important, tables were used for controlling page layout. This is no longer the case, but we still use tables when they are the most semantic way to mark up some content. But keep in mind: tables are not responsive, so you want to only use them when necessary and semantically correct.
HTML Tags Used in Tables:
<table></table>– table tags – these opening and closing tags will contain all of the rows/columns in your table<tr></tr>– table row tags – these opening and closing tags indicate a row in your table, and they will contain any table data tags for that row<td></td>– table data tags – these opening and closing tags will contain the the information in your table in columns, with multiple table data cells contained inside of table row tags<thead></thead>– table header tags – these opening and closing tags can be used to create a header for your table, to indicate row(s) that are labeling the columns below<tbody></tbody>– table body tags – these opening and closing tags can be used to indicate the part of your table that contains the data cells and their content<tfoot></tfoot>– table footer tags – these opening and closing tags can be used to indicate rows that are part of the footer of your table, for things like totals added up from the body columns<th></th>– table header information tags – these opening and closing tags are used in place of table data tags to indicate that their content labels the data in the column below them<caption></caption>– caption tags – these opening and closing tags should be placed inside of your table tags, and they display bold/large text that labels your table and explains what it contains
Attributes Used in Tables
<tr colspan="3">...</tr>– colspan – this attribute would be used on the opening tag of a row where you want the table data inside of it to span multiple columns in that row<td rowspan="2">...</td>– rowspan – this attribute would be used on the opening tag of a table data cell where you want the table data inside of it to span multiple rows in that column<table border="1">...</table>– border – this attribute would be used on the opening tag of the table itself, where you want the table to add a border to all of the cells in the table (Does this sound like styling? Yes! In practice, use CSS to add a border to the table cells, not the border attribute)
The caption Element
The caption element can be addd inside of a table and functions as a label for the table’s contents. This element is optional, and has no required attributes. The text that should appear on the page as the caption should be placed between the opening and closing caption tags.
Table Code Examples
The following code examples are meant to demonstrate how to properly code some types of tables.
GIT Coding Club 