HTML Tables



You will come across information that is best when put into tables.HTML
allows you to input tables through the < table> Tag .This tag has an
opening tag and a closing tag. The table tag is very simple in its usage.
< tr> tag is used to insert rows in a table while < td> tag is used to insert columns in a table,< td> stands for table data.

Table Example

<table border="1">
<tr>
<td>row 1, column 1</td>
<td>row 1, column 2</td>
</tr>
<tr>
<td>row 2, column 1</td>
<td>row 2, column 2</td>
</tr>
</table>

The browser will display:

row 1, column 1 row 1, column 2
row 2, column 1 row 2, column 2

HTML Border attribute

HTML has a border attribute through which we can show the tables with or without border.
Ex-
<table>
<tr>
<td>row 1, column1</td>
<td>row 1, column2</td>
</tr>
</table>

The browser would display the code as:

row 1, column1 row 1, column2

HTML Tables Cellspacing And Cellpadding

To further modify the tables and make the webpage more attractive we use
cellspacing and cellpadding.
<table border="1" cellpadding="10">
<tr>
<td>row 1, column 1</td>
<td>row 1, column 2</td>
</tr>
 
<tr>
<td>row 2, column 1</td>
<td>row 2, column 2</td>
</tr>
</table>

Table with cellpadding:

row 1, column 1 row 1, column 2
row 2, column 1 row 2, column 2

Table with cellspacing(distance between the cells):

<table border="1" cellspacing="10">
<tr>
<td>row 1, column 1</td>
<td>row 1, column 2</td>
</tr>
<tr>
<td>row 2, column 1</td>
<td>row 2, column 2</td>
</tr>
</table>

The code is displayed as:

row 1, column 1 row 1, column 2
row 2, column 1 row 2, column 2 
Previous:HTML Comments           Next:HTML Text Fields