Tables in HTML are used to display tabular data. Tabular data can include things such as calendars, schedule listings, or any form of data that you want to display an association with something else (outside of a list, of course). In HTML, tables are created first by starting with a Table tag (<table></table>).
Tables are composed of Table Rows (<tr></tr>), and within these rows are either Table Heading cells (<th></th>), or Table Data cells (<td></td>); Table Heading cells are usually formatted with bold text to differentiate them from actual data.
An example of a table could be the following:
If we want the cells a certain width, we define the width in the cells on the first row:
To center the text with a cell, we use the 'align' property:
Spanning Rows and Columns
You can merge cells within a table by using the 'colspan' and 'rowspan' properties within the Table Headings or Table Data tags. Take the following table, for example:
For merging cells within a row, add the 'colspan' property and define how many columns the cell will span. Merging cells within a column works in a similar manner, add the 'rowspan' property and define how many rows the cell will take up. You can even combine the two properties and have a cell span multiple columns and rows (as in the cell marked "Lunch" above). The HTML for the table above is: