A row is opened using <tr> tag and it is closed using </tr> tag. Whatever comes inside <tr> and </tr> are contents of that row. For each row, you have to add code <tr></tr>. In every row, there should be columns. To insert a column in a row. You should insert a code <td> cell content </td> for each column. We will see an example code and its result. It will make the things more clear.
Code for a table with 2 rows and two columns:
<table> |
The output is as follows:
| AAAA | BBBB |
| CCCC | DDDD |
Here the output do not appear to be a table. It is because, we have not added border to the table. AAAA is in first row's first column. BBBB is in second column of first column. CCCC is in second row's first column. DDDD is in second row's second column. We are making a slight change in the code to add border for the table. Now the code is as follows:
<table border="1"> |
The output is as follows:
| AAAA | BBBB |
| CCCC | DDDD |
Now you can see it in the form of a table. In the first example, we haven't provided border attribute. Then by default border takes the value zero. If we do not use border attribute, we can use tables in web pages without letting the visitor to see a table while actually there is a table. For yout information, let me tell you that, the codes displayed in this page (with gray background) are actually inside tables (single row single column tables). I have not used border attribute there. Here, in the second example, we are using border attribute with value 1. If you want to increase table thickness, you can change the value of border attribute.
Now we shall see another example.
Table with 3 Rows and 4 Columns:
<table border="8"> |
The output of above code is as follows:
| Roll No. | Name | Age | Mark (%) |
| 1 | Shafeeq | 21 | 91 |
| 2 | Ajmal | 22 | 94 |
In this example, we have changed border attribute's value to 8, making the outer border to appear thicker. There are three rows. Therefore <tr> and </tr> appears thrice. Similarly, there are 4 colums. Therefore <td> and </td> appear 4x3 times. Here the top row (first row) is header row. To make it aapear like a header row, i have used <b> and </b> within each <td> tag. You can use other formatting tags like font size, color, underline, italic inside the table. But the header row is to created in a different way. There is a special tag to apply header formatting to a cell.
Using <th> for Header in Table
<table border="1"> |
The changes made in this code is reduction of border thickness to 1, removal of <b> tags and usage of <th> tags.
| Roll No. | Name | Age | Mark (%) |
|---|---|---|---|
| 1 | Shafeeq | 21 | 91 |
| 2 | Ajmal | 22 | 94 |
Another Example With Column Headers (4x3)
<table border="1"> <tr> <th>Roll No.</th> <td>1</td> <td>2</td> </tr> <tr> <th>Name</th> <td>Shafeeq</td> <td>Ajmal</td> </tr> <tr> <th>Age</th> <td>21</td> <td>22</td> </tr> <tr> <th>Mark (%)</th>
<td>91</td>
<td>94</td>
</tr>
</table>
|
The output of this code will be as follows:
| Roll No. | 1 | 2 |
|---|---|---|
| Name | Shafeeq | Ajmal |
| Age | 21 | 22 |
| Mark (%) | 91 | 94 |
No comments :
Post a Comment