Tables in html
In this article we are going to learn about tables, table width, height and border in html, how we can create records in tabular form in our web pages which will be useful in data recording.
We learnt about html, text in html, lists in html, links in html, inputs in html, buttons in html, forms in html and html elements so, now we are going to learn about tables in html.
Tables
Tables (<table></table>) are more useful in websites to record data in tabular form for easy presentation and reading the records as tables can have headings, rows and columns.
Let us create a simple table, copy and paste below code.
<table>
<tr>
<th>First name</th>
<th>Last name</th>
<th>District</th>
<th>Age</th>
</tr>
<tr>
<td>Tanki</td>
<td>Matete</td>
<td>Berea</td>
<td>26</td>
</tr>
<tr>
<td>Tumisang</td>
<td>Katile</td>
<td>Berea</td>
<td>11</td>
</tr>
</table>
So, we should have the following results and we have records in our table with headings of data, three rows including heading heading row and four columns.
| First name | Last name | District | Age |
|---|---|---|---|
| Tanki | Matete | Berea | 26 |
| Tumisang | Katile | Berea | 11 |
Table width
Let us create another simple table with a 100% width applied, copy and paste below code.
<table width="100%">
<tr>
<th>First name</th>
<th>Last name</th>
<th>District</th>
<th>Age</th>
</tr>
<tr>
<td>Tanki</td>
<td>Matete</td>
<td>Berea</td>
<td>26</td>
</tr>
<tr>
<td>Tumisang</td>
<td>Katile</td>
<td>Berea</td>
<td>11</td>
</tr>
</table>
So, we should have the following results and we can see that a table width has increased and space between columns has increased.
| First name | Last name | District | Age |
|---|---|---|---|
| Tanki | Matete | Berea | 26 |
| Tumisang | Katile | Berea | 11 |
Table height
Let us create another simple table with a 110px height applied, copy and paste below code.
<table height="300px">
<tr>
<th>First name</th>
<th>Last name</th>
<th>District</th>
<th>Age</th>
</tr>
<tr>
<td>Tanki</td>
<td>Matete</td>
<td>Berea</td>
<td>26</td>
</tr>
<tr>
<td>Tumisang</td>
<td>Katile</td>
<td>Berea</td>
<td>11</td>
</tr>
</table>
So, we should have the following results and we can see that a table height has increased and space between rows has increased.
| First name | Last name | District | Age |
|---|---|---|---|
| Tanki | Matete | Berea | 26 |
| Tumisang | Katile | Berea | 11 |
Table borders
Let us create another simple table with 100% width and border applied, copy and paste below code.
<table border="1" width="100%">
<tr>
<th>First name</th>
<th>Last name</th>
<th>District</th>
<th>Age</th>
</tr>
<tr>
<td>Tanki</td>
<td>Matete</td>
<td>Berea</td>
<td>26</td>
</tr>
<tr>
<td>Tumisang</td>
<td>Katile</td>
<td>Berea</td>
<td>11</td>
</tr>
</table>
So, we should have the following results and we can see that a table has border around it.
| First name | Last name | District | Age |
|---|---|---|---|
| Tanki | Matete | Berea | 26 |
| Tumisang | Katile | Berea | 11 |