comment Add Comment
Posted on Last updated

HTML Tables

Hello, and welcome to the next unit of our HTML course series titled HTML Tables. In this course, we are going to learn how to insert tables in our websites. We would look at the this in three sections:

  1. Tables Tags,
  2. The Table Header, and
  3. The Table Border.

References – HTML Table Tutorial – Quackit Tutorials

HTML Table Tags

Just as all other elements use tags in HTML, so does tables. Tables use the following tags:

Tag Description
<table></table> For Defining a table
<tbody></tbody> For Defining the body of a table
<tr></tr> For Defining the row of a table
<th></th> For defining a table header
<td></td> For Defining a table data

The code for inserting tables like the one you see above can be written this way;

Code Appearance
<table border="1">
<tbody>
<tr>
<th>Phones</th>
<th>Computers</th>
</tr>
<tr>
<td>Samsung</td>
<td>HP</td>
</tr>
<tr>
<td>HTC</td>
<td>Acer</td>
</tr>
</tbody> 
</table>
Phones Computers
Samsung HP
HTC Acer

The HTML Tables Header

The table header uses the <th></th> tag. As you can see, using the header tag made the headings to be written in bold. To omit the header in your table, remove the <th> tag or change it to a <td></td> (table data) tag.

The HTML Tables Border

The table border uses the attribute “border”. the  value “1” refers to the thickness of the border. To get a thicker border, you can increase it to 2 ,3, or even 5 depending on the size you want.

OK! So we are done with HTML Tables too. Please don’t forget to copy the code, paste it in your html editor and try customizing to your own specification to see how it works. … and don’t forget to wrap it in the <html></html> tags. Post your customized codes in the forum for others to check them out too. See you in the next lesson.


Leave a Reply

Your email address will not be published. Required fields are marked *