HTML and CSS Reference
In-Depth Information
Tables
When we want to mark up data that would be best presented in a table, we need to create
HTML tables. Tabular data usually reminds us of spreadsheets, but HTML tables are slightly
different from spreadsheets tables because they consist of rows and cells in a row. There is
no need to define a number of columns, as the number of cells in each row determines how
many columns a table will have. Nevertheless, marking up tabular data is relatively easy, as
HTML provides us with plenty of semantic elements for data organization.
The starting point for every HTML table is the <table> element. Let us start adding a table
to redesign the Skills section in our sample CV.
<table>
</table>
Using just a <table> tag is not sufficient to create the table; we need to add a table row with
the <tr> element.
<table>
<tr>
</tr>
</table>
Finally, we need to add a few cells in this row in order to have a basic table displayed in our
browser. When discussing HTML table semantics, we must be aware that there are two type
of elements to represent table cells: <td> and <th>. The <td> element stands for table data
and represents a regular cell that contains data. The <th> element stands for table header and
defines a cell that contains a heading for a table row or a column.
In our example, in the first row we will insert two header cells one for 'Web Technology' and
the other for 'Skill Level'.
<table>
<tr>
Search WWH ::
Custom Search