One of the most important tag is the table tag. To be able to create tables in our WEB site, we need to use <table> tag. Inside the table tag, to define a row we use <tr>, and to describe a cell inside the row we use the <td> tag.
<table>
<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>
|
Row 1 Cell 1 |
Row 1 Cell 2 |
|
Row 2 Cell 1 |
Row 2 Cell 2 |
To be able to define headings in the table we use <th> tag
<table>
<tr>
<th>Cell 1</th>
<th>Cell 2</th>
</tr>
<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>
|
Cell 1 |
Cell 2 |
|
Row 1 Cell 1 |
Row 1 Cell 2 |
|
Row 2 Cell 1 |
Row 2 Cell 2 |
There are a few table attributes to format our table. If we want to specify border, we need to use border="" attribute. Also there are cellspacing and cellpadding that specify the space between two cell and space between cell borders and cell content.
<table border="1" cellspacing="5" cellpadding="5">
<tr>
<th>Cell 1</th>
<th>Cell 2</th>
</tr>
<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>
|
Cell 1 |
Cell 2 |
|
Row 1 Cell 1 |
Row 1 Cell 2 |
|
Row 2 Cell 1 |
Row 2 Cell 2 |
If we want to define the table size, we need to use width="" and height="" attributes. If we want to change the background color, we need to use bgcolor="" or if we want to use an image as a background we need to use background="" attributes. These attributes are the same for the <td> tag so if we use these attribute in table tag, it specifies the all cell but if you use these attributes for <td> tag, it means there attributes are effective just for that cell.
<table border="1" cellspacing="5" cellpadding="5" bgcolor="red">
<tr>
<th>Cell 1</th>
<th>Cell 2</th>
</tr>
<tr>
<td>Row 1 Cell 1</td>
<td>Row 1 Cell 2</td>
</tr>
<tr>
<td bgcolor="gray">Row 2 Cell 1</td>
<td bgcolor="gray">Row 2 Cell 2</td>
</tr>
</table>
Moreover, we can merge the cells and have more complex table designs. The important thing is that you should know that designing table starts from the left-top corner. If we want to merge columns, we need to use colspan="" attribute and for row merge, we need to use rowspan="" attribute and as I said we start from the left-top corner and use it just once in a <td> tag.
Let me examply it by an example. Let's try to do below table design.
HTMLExpTable.jpg" alt="HTML tables" />
Now to do this table, let's start from the left-top corner. At first, define the table <table> and then we have one row <tr>. Now we define the cell but as you see it merged with the next row thus we define it like <td colspan="2">1</td>. Now we define 2 cell as a merged. Then we have one more cell but it is merged with below cell. It means we need to use rowspan because below cell belongs the other row. So define it as <td colspan="2">2</td>. After that as you see we finished the first row and close it and open second row tag. </tr><tr>. As you see we have one more cell which is merged with below cell too. As we did before, we use rowspan="" attribute to merge it like <td rowspan="2">3</td>. Then let's go on. Now we have only one cell and define it <td>4</td>. As you see we don’t need to use merge attributes. After that we have one cell which is merged with above cell but as you know we defined it in above cell. As you see we just follow the line from left-top to right-bottom. Thus we don’t need to define this cell because it has already defined by above cell. Let's close this row and open the last row. </tr><tr>. Now we have one more cell which is merged by above cell so like before, we don’t need to define it. Next cell as you see, is merged by next cell. So we need to use colspan="" attribute to merge these two cells. <td colspan="2">5</td>. And close the row and table. </tr></table>.
<table>
<tr>
<td colspan="2">1</td>
<td rowspan="2">2</td>
</tr>
<tr>
<td rowspan="2">3</td>
<td>4</td>
</tr>
<tr>
<td colspan="2">5</td>
</tr>
</table>
Now, open your page and look at whether it works or not?
Did you get the point? It is simple, start from left-top to right-bottom.
