Back to the index| Previous | Next

Competences: To insert a table in the web page.

Contents: The tags table, tr,td and their style elements

The tags table, tr, td

Table 2*2 (2 rows, 2 columns)

A style for the tables: the border

You can use the style property border with the td selector if you want to add a border to each cell, with tr if you want to add a border to each row or with table if you want to add a border to the whole table.

The border values are the width (in pixels), the type (solid, dotted, dashed ..) and the colour.

You must insert all the properties in the style tag in the head section.
Here there are some examples:

Css code OutputCodice css Output
td {border: 2px dotted red} A1 td {border: 1px solid bleu} B1
td {border: 1px dashed green} C1 td {border: 2px solid brown} D1
td {border: 2px solid brown} E1 td {border: 2px dashed violet} F1

Let's make space: the padding

The padding property defines the space between the bord and the content of the cell.

Css code Output
td { border: 1px solid blue; padding: 5x} A1 A2
td { border: 1px solid brown; padding: 30px} B1 B2

The background-color

You can add the background-color property to the table elements, as the other selectors.

Css code Output
table {background-color:yellow;}
td {padding: 30px; border: 1px solid brown}

A table can be a photo album!

Code Output
<td><img src="image/album1.jpg" /></td>
<td><img src="image/album2.jpg" /></td>
<td><img src="image/album3.jpg" /></td>
<td><img src="image/album4.jpg" /></td>
album1 (28K) album2 (18K)
album3 (30K) album4 (21K)

Create a table in your web page!

  • Open your file index.htm (or page2.htm, or page3.htm ...) and insert a table.
    Note: each tr tag is a row, each td is a cell!
    table {border:...;background-color:...;  }
    td {border: ...; padding: ...; }
       <td> insert something here! (Text, images, links!)</td>
       <td> insert something here!</td>
  • Give a style to the table by the border, padding and background-color properties
  • .
  • Save the file in your local site and take a look at it.
  • Upload the file in your remote site.
  • Write a message in the forum "Tables" to inform that your page with tables is done!
  • Ludovica Battista

    Back to the index| Previous | Next