Tables
Tables are based on three main tags: table, tr and td : table, table row and table data. First, let's learn how to make rows. Each tr is a row.
<table>Unluckily, this isn't enough. You have to add data cells to your rows, like this:
<tr> <!-- first row -->
Row 1 contents
</tr> <!-- end of first row -->
<tr> <!-- second row -->
Row two contents
</tr> <!-- end of second row -->
</table>
<table>Given there isn't any attribute, it will display this: (the borders aren't visibles)
<tr> <!-- first row -->
<td>This is line 1</td>
</tr> <!-- end of first row -->
<tr> <!-- second row -->
<td>This is line 2</td>
</tr> <!-- end of second row -->
</table>
| This is line 1 |
| This is line 2 |
Now, let's see how to add columns. It's simple, you just have to add another "table data" in the "table row", like this:
<table>And it will display: (I added a border to make it more visible)
<tr> <!-- first row -->
<td>This is line 1, cell 1</td>
<td>This is line 1, cell 2</td>
</tr> <!-- end of first row -->
<tr> <!-- second row -->
<td>This is line 2, cell 1</td>
<td>This is line 2, cell 2</td>
</tr> <!-- end of second row -->
</table>
| This is line 1, cell 1 | This is line 1, cell 2 |
| This is line 2, cell 1 | This is line 2, cell 2 |
See? It's simple. If you want ten columns, then add td 10 times between tr tags. Now, let's continue with something more complicated... We're going to merge columns. For example, in your first row, you have two cells and you want only one cell in the second row.
<table>It will display: (once again, I added the border attribute)
<tr>
<td>Line 1, cell 1</td>
<td>Line 1, cell 2</td>
</tr>
<tr>
<!-- add colspan="2" in the td tag. -->
<td colspan="2">Line 2, cell 1</td>
</tr>
</table>
| Line 1, cell 1 | Line 1, cell 2 |
| Line 2, cell 1 | |
You can always change the colspan value by the number of columns you need to merge. In fact, it's pretty simple neh? Well, that was for columns, let's see how it works for rows now.
<table>It will display: (I added the border attribute)
<tr>
<!-- add rowspan="2" in the td tag. -->
<td rowspan="2">Column 1, line 1 and 2</td>
<td>Column 2, line 1</td>
</tr>
<tr>
<td>Column 2, line 2</td>
</tr>
</table>
| Column 1, line 1 and 2 | Column 2, line 1 |
| Column 2, line 2 |
As for the columns, you will have to change the rowspan value by the number of rows you want to merge. Now, let's see some table attributes.
<table width="200" cellpadding="0" cellspacing="0" border="1">
<!-- tr, td tags here -->
</table>
- width can be in pixels (so you just put a number) or in %, but you will need to add % after the number.
- cellpadding is the space between the cell's border and the text. (pixels or %)
- cellspacing is the space between cells. (pixels or %)
- border is the size or the table's border. (pixels) I recommend you to use border="0", it's nicer.
<table align="center" bgcolor="#FFFFFF" dir="ltr">
<!-- tr, td tags here -->
</table>
- align is the table alignment. It can be center, left or right.
- bgcolor is the table background color. You may use hex color codes.
- dir is the text direction. It can be ltr (left to right) or rtl (right to left).
Leave a Comment
Works? Doesn't work? Other tips? Please leave a comment! :)