Table in HTML
To arrange data on a web page in tabular form, we can use <table> to arrange them into rows and columns.
Table consists of multiple rows and columns. There are the following tags we can use to create row and column in a table:
- <tr> : to create a row
- <td> : to define the content of each cell inside a row.
- <th> : to define the heading for each cell
Example:
<table border="1">
<tr>
<th>S.No</th>
<th>Name</th>
<th>Country</th>
</tr>
<tr>
<td>1.</td>
<td>Jeff</td>
<td>USA</td>
</tr>
<tr>
<td>2.</td>
<td>Ratan</td>
<td>India</td>
</tr>
</table>
Output:
| S.No | Name | Country |
|---|---|---|
| 1. | Jeff | USA |
| 2. | Ratan | India |
Later HTML introduces some meaningful tags to define a better structure of HTML table. And there tags are as follows
- thead : groups the table header
- tbody : groups the content of the table
- tfoot : groups the footer content of the table
Example:
<table border="1">
<thead>
<tr>
<th>S.No</th>
<th>Name</th>
<th>Country</th>
</tr>
</thead>
<tbody>
<tr>
<td>1.</td>
<td>Jeff</td>
<td>USA</td>
</tr>
<tr>
<td>2.</td>
<td>Ratan</td>
<td>India</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Total:2</td>
<td></td>
<td></td>
</tr>
<tfoot>
</table>
Output:
| S.No | Name | Country |
|---|---|---|
| 1. | Jeff | USA |
| 2. | Ratan | India |
| Total:2 |
Rowspan and Colspan attributes:
In real case scenarios, there could be some values which spans over multiple rows or columns, to achieve this we use rowspan attribute for spanning rows and colspan attribute for spanning column in html.
Example:
<table border="1">
<tr>
<td rowspan="2">Span two rows</td>
<td>Row 1</td>
</tr>
<tr>
<td>Row 2</td>
</tr>
<tr>
<td>Column 1</td>
<td>Column 2</td>
</tr>
<tr>
<td colspan="2">Span two columns</td>
</tr>
</table>
Output:
| Span two rows | Row 1 |
| Row 2 | |
| Column 1 | Column 2 |
| Span two columns | |
Note: border attribute of table tag is used to provide border to the table.
Continue Learning: Drop Down in HTML
Comments
Post a Comment