The best hosting

TUTORIALS » HTML / JavaScript » HTML essentials (guided tutorials)

Tables in HTML

Page 2 of 6


Table headers

Normally, we use 
<td>
's to define each cell conforming the columns of a row, but you can also use 
<th>
's instead. The 
<th>
tag behaves similar to a 
<td>
but it's content is presented with a centered alignment and a bold font.

So, the example: 

<table border="1">
	<tr> <th>Name</th> <th>Age</th> </tr>
	<tr> <td>John</td> <td>36</td> </tr>
	<tr> <td>Mary</td> <td>27</td> </tr>
</table>


Will render:
Name Age
John 36
Mary 27

In the example above, only the Name and Age cells are within 
<th>
's causing them to display as headers of the table, all other cells are within 
<td>
's.

  1. Create a new XHMTL document and write inside the 
    <body>
    section: 
    <table border="1">
	<tr> <th>Qty.</th> <th>Fruit</th> </tr>
	<tr> <td>23</td> <td>Oranges</td> </tr>
	<tr> <td>12</td> <td>Apples</td> </tr>
</table>
  2. Test it in your browser.
Also try with: 
<table border="1">
	<tr> <th>Qty.</th> <td>23</td>  <td>12</td> </tr>
	<tr> <th>Fruit</th> <td>Oranges</td>  <td>Apples</td> </tr>
</table>

And with: 
<table border="1">
<tr> <th>&nbsp;</th> <th>A</th> <th>B</th> <th>C</th> </tr>
<tr> <th>1</th> <td>A1</td> <td>B1</td> <td>C1</td> </tr>
<tr> <th>2</th> <td>A2</td> <td>B2</td> <td>C2</td> </tr>
<tr> <th>3</th> <td>A3</td> <td>B3</td> <td>C3</td> </tr>
</table>

In the next pages of this tutorial we will learn how to control the overall dimensions of our table, the width of our columns and the height of our rows.

More pages of this tutorial → Tables in HTML  <123456>
Comments & Questions