HTML/Tables

From Wikiversity
Jump to navigation Jump to search

Tags[edit]

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[edit]

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[edit]

Width[edit]

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[edit]

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[edit]

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[edit]

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

*voidshows no border
*aboveshows border only on top side
*belowshows only on bottom side
*hsidesshows only on top+bottom
*lhsshows only on left side
*rhsshows only on right side
*vsidesshows only on left+right sides
*boxshows on all sides
*bordershows on all sides


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

#

Cell Padding[edit]

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[edit]

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.

##


Learning HTML
Previous: Lists in HTMLNext: Forms in HTML