Tables (basics)

 

In HTML you can create tables by using the <table> tag, in conjunction with the <tr> tag for showing table rows and <td> tag for indicating table cells.

 

HTML Example:

 

<table border="1">
<tr>
<td>Table cell 1</td>    <td>Table cell 2</td>
</tr>
</table>

 

 

Result:

 

Table cell 1

Table cell 2


 

 

This border attribute allows us to specify the thickness of the table’s border. If you don't want a border then use 0 (zero). Other common attributes you can use within your table tag include:

 

Attribute

                                              Purpose

width

determines the width of the table or table cell

height

determines the height of the table or table cell

cellspacing

determines the spacing between cells

cellpadding

determines the padding around the text inside a cell

 

You can also add attributes to the <tr> and <td> tags. For example, you can specify the width and height of each table cell individually. They can be specified in either pixels or by percentages. Specifying the pixels allows you to specify an exact width or height. Percentage allows the table to "grow" or "shrink" depending on what else is on the page and how wide the browser is.

 

HTML Example:

 

<table border="1" cellpadding="5" cellspacing="5" width="450">
<tr>
<td width="200">Table cell 1</td>    <td>Table cell 2</td>
</tr>
</table>

 

Result:

 

Table cell 1

Table cell 2

 

 

Table with more Rows and Cells

 

In order to create more rows simply add <tr></tr> inside your <table> tags. In order to create more table cells in a row you need to add <td></td> and type the date between these tags.

 

HTML Example:

 

<table border="2" cellpadding="5" cellspacing="5" width="450">

<tr> <th width="200">Table header 1</th> <th>Table header 2</th>
</tr>

<tr> <td width="200">Table data 1</td> <td>Table data 2</td>
</tr>

</table>

 

Result:

 

Table header 1

Table header 2

Table data 1

Table data 2

 

In the above example <th> defines the table header.

 

Colspan

 

You can use the colspan attribute to make a cell span (expand) multiple columns.

 

HTML Example:

 

<table border="1" cellpadding="5" cellspacing="5" width="450">

<tr><td colspan="2">Table cell 1</td>
</tr>

<tr><td width="200">Table cell 2</td>      <td>Table cell 3</td>
</tr>

</table>

 

Result:

 

Table cell 1

Table cell 2

Table cell 3

 

 

 

 

 

Buy "Digest Web Design" PDF Book

 

All the information on this website is also provided in a PDF book for only $30.
Click here to buy.

 

 

<<    Previous Page                                                                    Next Page    >>