|
LILLY ROBOT |
Table
A table consists of columns and rows. Inside a table you can have images and data. The size of the table can be controlled using the width and height attributes.
Table Structure
<table> This is the start of the table
<th>table heading </th>
<tr> Start of a table row
<td>table data</td>
</tr> End of a table row
</table>This is the end of the table
In a table you can have many rows <tr></tr> and in each row you can have many data cells <td></td>.
Now we are going to create a table using the above structure. We are going to include a border attribute with a width value of 2px, which will help us see the table more clearly.
<table border="2">
<tr>
<th> Heading 1</th>
<th> Heading 2</th>
</tr>
<tr>
<td>Row 1, Data Cell 1</td>
<td>Row 1, Data Cell 2</td>
</tr>
<td>Row 2, Data Cell 1</td>
<td>Row 2, Data Cell 2</td>
</tr>
</table>
There are two columns and two rows. Each row contains two data cells.
Displays
| Heading 1 | Heading 2 |
|---|---|
| Row 1, Data Cell 1 | Row 1, Data Cell 2 |
| Row 2, Data Cell 1 | Row 2, Data Cell 2 |
Table Attibutes
The table attributes that we need to have a good understanding of are cellspacing and cellpadding. A table with cell spacing and padding makes a table look more presentable.
Cell Spacing
In the older version of HTML the cellspacing attribute was used to create spaces between the data cells. It has now been replaced with CSS border-spacing. However, HTML5 still supports the cellspacing attribute, so for this reason we are going to have a look at it but try to avoid using it once you have learnt CSS.
<table border="2" cellspacing="10">
<tr>
<td>Row 1 Cell 1</td>
<td>Row 1 Cell 2</td>
</tr>
<tr>
<td>Row 2 Cell 1</td>
<td>Row 2 Cell 2</td>
</tr<
</table<
Have a look at the tables below; the table on the left has a
cellspacing of 10 and the table on the right has no cellspacing.
Which one do you think is better to look at?
Displays
| Heading 1 | Heading 2 |
|---|---|
| Row 1 Cell 1 | Row 1 Cell 2 |
| Row 2 Cell 1 | Row 2 Cell 2 |
No Cell Spacing
| Heading 1 | Heading 2 |
|---|---|
| Row 1 Cell 1 | Row 1 Cell 2 |
| Row 2 Cell 1 | Row 2 Cell 2 |
Cell Padding
Cell padding is the space between the content of the data cell and its border.
<table border="2" cellpadding="5">
<tr>
<td>Row 1 Cell 1</td>
<td>Row 1 Cell 2</td>
</tr>
<tr>
<td>Row 2 Cell 1</td>
<td>Row 2 Cell 2</td>
</tr<
</table<
Displays
| Row 1 Cell 1 | Row 1 Cell 2 |
| Row 2 Cell 1 | Row 2 Cell 2 |
Let's have a look at the difference between 10px cellpadding and 10px cellspacing.
Cell Padding
| Row 1 Cell 1 | Row 1 Cell 2 |
| Row 2 Cell 1 | Row 2 Cell 2 |
Cell Spacing
| Row 1 Cell 1 | Row 1 Cell 2 |
| Row 2 Cell 1 | Row 2 Cell 2 |
Colspan and Rowspan
The rowspan and colspan attributes are handy to use if you want to merge rows or columns.
Rowspan
Rowspan attribute merges the cells of two or more rows. In the table below, we have merged the data cells of row 1 and 2 in column 1.
<table border="2" cellpadding="5">
<tr>
<th>Column 1</th>
<th>Column 2</th>
</tr>
<tr>
<td rowspan="2">
Merged the cells of
row 1 and 2 in column 1
</td>
<td>Row 1 </td>
</tr>
<td>Row 2 </td>
</tr>
</table>
Displays
| Column 1 | Column 2 |
|---|---|
| Merged the cells of row 1 and 2 in coloumn 1 |
Row 1 Cell 1 |
| Row 2 Cell 2 |
Colspan
Colspan attribute merges the cells of two or more columns. In the table below, we have merged the cells of column 1 and 2 in row 1.
<table border="2" cellpadding="5">
<tr>
<th>Column 1</th>
<th>Column 2</th>
</tr>
<tr>
<td colspan="2">Merged the cells of
column 1 and 2 in row 1
</td>
<td>Row 1</td>
</tr>
<tr>
<td>Row 2</td>
</tr>
</table>
Displays
| Column 1 | Column 2 |
|---|---|
|
Merged the cells of column 1 and 2 in row 1 |
|
| Row 2 Cell 1 | Row 2 Cell 2 |
Caption
A caption on a table helps you understand what the table content is about. In the table below, the caption is displayed at the top of the table. The opening and closing tags for a caption are <caption></caption>.
<table border="2" cellpadding="2" >
<caption>
Biology results for year 1
</caption>
<tr>
<th>Student Id</th>
<th>Results</th>
</tr>
<tr>
<td>K1234</td>
<td>Passed</td>
</tr>
<tr>
<td>R4567</td>
<td>Failed
</tr>
<tr>
<td>T2388</td>
<td>Passed</td>
</tr>
</table>
You don't always need a caption on a table but it does help to understand what the table is about before looking at the data.
Displays
| Student Id | Results |
|---|---|
| K1234 | Passed |
| R4567 | Failed |
| T2388 | Passed |
Table with CSS
The table is going to have different border colours. We are going to use the internal style sheet, which is placed inside the <head></head> tags.
<head>
<style>
table
{
border:4px solid purple;width:600px;
padding:10px;
}
th
{
border:3px solid green;
}
border:1px solid red;
}
</style>
</head>
<body>
<table>
<tr>
<th>Heading 1</th>
<th>Heading 2</th>
<th>Heading 2</th>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
</tr>
</table>
</body>
Displays
| Heading 1 | Heading 2 | Heading 3 |
|---|---|---|
| Cell 1 | Cell 2 | Cell 3 |