HTML/Tables

Tags

Tables in HTML are relatively simple to create and modify. This is done using the tags:

• <table> to declare a table.
• </table> to end the table.
• <tr> to declare the start of a new row.
• <th> to declare the start of a new table header
• </th> to declare the end of a table header
• </tr> to declare the end of a row.
• <td> to declare a cell.
• </td> to close a cell.

Use

The code:
<table>
<tr>
<td>TITLE 1</td>
<td>TITLE 2</td>
</tr>
<tr>
<td>Contents 1</td>
<td>Contents 2</td>
</tr>
<tr>
<td>Contents 3</td>
<td>Contents 4</td>
</tr>
</table>

Will output:

TITLE 1	TITLE 2
Contents 1	Contents 2
Contents 3	Contents 4

Modifications

Width

To control table width, width = "'''x'''" can be added to the <table>, replacing x with the desired width, in pixels or %.
eg <table width="100"> will generate a 100px wide table.

#

#

Border

To adjust border width, add border = "'''x'''" to the <table> tag, with x replaced with the desired border width in pixels.
eg <table border = "1"> will generate a table with border width 1px.

#

#

Divider Lines

To choose where divider lines appear, rules is added to the <table> tag, with one of the following arguments:

• none
• groups
• rows
• cols
• all
  

eg <table rules="cols"> will return a table with only columns divided.

#	#
#	#

NB: This only works with a visible border, ie border width>0px.

Frames

To hide one or more sections of border, frame is added to the <table> tag, with one of these arguments:

*void	shows no border
*above	shows border only on top side
*below	shows only on bottom side
*hsides	shows only on top+bottom
*lhs	shows only on left side
*rhs	shows only on right side
*vsides	shows only on left+right sides
*box	shows on all sides
*border	shows on all sides

eg <table frame="lhs"> will return a table with border only on the left side.

#

Cell Padding

To control the amount of padding between the contents of a cell and its borders, use cellpadding="x" to the <table> tag, with x as the amount of padding you want, in pixels or %. eg <table cellpadding="10"> will draw a table with 10px cell padding.

#

Cell Spacing

The space between cells is controlled the same way as cell padding, only with cellspacing="x" used instead.
eg <table cellspacing="5"> will draw a table with 5px cell padding.

#

#

Background

setting image Background from url or local file

example: <table background="C:\Users\blackos\Pictures\eveningdavid.jpg">

Learning HTML

Previous: Lists in HTML — Next: Forms in HTML