HTML tables
Creating a table
Use the code below to create a basic table.
<table></table>
The main attributes are width, border, cell spacing and padding. The width defines the size of the table, the cell spacing determines the space between adjacent cells, the cell padding adds padding to the inside of each cell. The border attribute specifies the size of the border around the table.
<table width="250" border="0" cellspacing="2" cellpadding="2"></table>
Adding rows
When creating a table the structure is such that the rows are defined first, then the columns.
<table width="250" border="0" cellspacing="2" cellpadding="2">
<tr>Row one</tr>
<tr>Row two</tr>
</table>
Adding columns
Now that the rows have been added we can add columns.
<table width="250" border="0" cellspacing="2" cellpadding="2">
<tr>
<td>Row 1 Column 1</td>
<td>Row 1 Column 2</td>
<td>Row 1 Column 3 </td>
</tr>
<tr>
<td>Row 2 Column 1</td>
<td>Row 2 Column 2</td>
<td>Row 2 Column 3</td>
</tr>
</table>
Merging columns
Each row of a table must have the same number of columns, but you can merge columns if you want fewer columns in some rows.
<table cols="3" width="250" border="0" cellspacing="2" cellpadding="2">
<tr>
<td>Row 1 Column 1</td>
<td>Row 1 Column 2</td>
<td>Row 1 Column 3 </td>
</tr>
<tr>
<td colspan="3">Row 2 Column 1-3</td>
</tr>
</table>
Note that the attribute colspan
has been specified. This tells the browser how many columns this column spans. Also note that the other columns in the second row have been deleted.
Merging rows
The same idea can be applied to rows, if you want to merge them.
<table cols="4" width="250" border="1" cellspacing="2" cellpadding="2">
<tr>
<td rowspan="2">Big Row 1</td>
<td>Row 1 Column 2</td>
<td>Row 1 Column 3 </td>
</tr>
<tr>
<!-- Missing column -->
<td>Row 2 Column 2</td>
<td>Row 2 Column 3</td>
</tr>
</table>
Note that as well as the the rowspan
attribute being used, the first column of the second row has been deleted. This is because to merge a row we want the make vertical columns merge so a column must be lost.
THEAD, TBODY and TFOOT
These are elements that can be defined within a table to give the table structure. The THEAD
can only be defined once and appear at the start of the table. The THEAD
must come directly after the table element. The TFOOT
tag generally has the same content as the THEAD
and is rendered by a browser at the bottom of a table. This is used to add header elements to the bottom of a table. This tag must be placed before TBODY
elements.
<table cols="4" width="250" border="1" cellspacing="2" cellpadding="2">
<thead>
<tr>
<td>Row 1 Column 1</td>
<td>Row 1 Column 2</td>
</tr>
</thead>
<tfoot>
<tr>
<td>Row 1 Column 1</td>
<td>Row 1 Column 2</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Row 1 Column 1</td>
<td>Row 1 Column 2</td>
</tr>
</tbody>
</table>
The TBODY
tag can be used to also add structure to a table. This tag can be used as many times as is necessary and defines a section of the table that is logically grouped.
Captions and headers
Captions can be added to tables using the caption element. This can only be used once and must come immediately after the table element.
<table width="250" border="1" cellspacing="2" cellpadding="2">
<caption>Table in HTML</caption>
<tr>
<td>Row 1 Column 1</td>
<td>Row 1 Column 2</td>
</tr>
</table>
Headers can be created using the TH
element in the place of a column element (td
). These element can be used anywhere as many times as is necessary.
<table cols="4" width="250" border="1" cellspacing="2" cellpadding="2">
<tr>
<th>Row 1 Column 1</th>
<th>Row 1 Column 2</th>
</tr>
<tr>
<td>Row 2 Column 1</td>
<td>Row 2 Column 2</td>
</tr>
</table>