Working with Tables

Tables

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:

HTML <table>
<tr>
<th>Sunday</th>
<th>Monday</th>
<th>Tuesday</th>
<th>Wednesday</th>
<th>Thursday</th>
<th>Friday</th>
<th>Saturday</th>
</tr>
<tr>
<td>29</td>
<td>30</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
</table>
Output
Sunday Monday Tuesday Wednesday Thursday Friday Saturday
29 30 1 2 3 4 5

If we want the cells a certain width, we define the width in the cells on the first row:

HTML <table>
<tr>
<th width="100">Sunday</th>
<th width="100">Monday</th>
<th width="100">Tuesday</th>
<th width="100">Wednesday</th>
<th width="100">Thursday</th>
<th width="100">Friday</th>
<th width="100">Saturday</th>
</tr>
...
</table>
Output
Sunday Monday Tuesday Wednesday Thursday Friday Saturday
29 30 1 2 3 4 5

To center the text with a cell, we use the 'align' property:

HTML <table>
<tr>
<th width="100" align="center">Sunday</th>
<th width="100" align="center">Monday</th>
<th width="100" align="center">Tuesday</th>
<th width="100" align="center">Wednesday</th>
<th width="100" align="center">Thursday</th>
<th width="100" align="center">Friday</th>
<th width="100" align="center">Saturday</th>
</tr>
...
</table>
Output
Sunday Monday Tuesday Wednesday Thursday Friday Saturday
29 30 1 2 3 4 5

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:

Output
Time Mon Tues Wed Thurs Fri
8:00am




8:30am
Conference


9:00am



9:30am



10:00am Meeting Meeting
Meeting
10:30am

11:30am




12:00pm Lunch
12:30pm
1:00pm




1:30pm




2:00pm Consult
Consult

2:30pm


3:00pm


3:30pm




4:00pm Break
4:30pm




5:00pm




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:

HTML <table border="1" cellspacing="0">
<tr>
<th width="100" align="center">Time</th>
<th width="100" align="center">Mon</th>
<th width="100" align="center">Tues</th>
<th width="100" align="center">Wed</th>
<th width="100" align="center">Thurs</th>
<th width="100" align="center">Fri</th>
</tr>
<tr>
<th>8:00am</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th>8:30am</th>
<td>&nbsp;</td>
<td rowspan="4" align="center">Conference</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th>9:00am</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th>9:30am</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th>10:00am</th>
<td rowspan="2" align="center">Meeting</td>
<td rowspan="2" align="center">Meeting</td>
<td>&nbsp;</td>
<td rowspan="2" align="center">Meeting</td>
</tr>
<tr>
<th>10:30am</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th>11:30am</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th>12:00pm</th>
<td colspan="5" rowspan="2" align="center">Lunch</td>
</tr>
<tr>
<th>12:30pm</th>
</tr>
<tr>
<th>1:00pm</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th>1:30pm</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th>2:00pm</th>
<td rowspan="3" align="center">Consult</td>
<td>&nbsp;</td>
<td rowspan="3" align="center">Consult</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th>2:30pm</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th>3:00pm</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th>3:30pm</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th>4:00pm</th>
<td colspan="5" align="center">Break</td>
</tr>
<tr>
<th>4:30pm</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th>5:00pm</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>



Content by Vincent Santa Maria.