The tags table, tr, td

Tables are defined by the <table>..</table> tags.
A table is divided into rows by the <tr>..</tr> tags. (tr stands for table row)
Each row is divided into data cells by the <td>..</td> tags. (td stands for table data, which is the content of a data cell).
The number of the cells in a row is the number of the columns.
In a cell (in the td tag) you can insert text, images, lists and other objects.
You can't insert anything in the table or tr tags.

Code

Output

Notes

<table>
<tr><td>A1</td><td>A2</td></tr>
<tr><td>B1</td><td>B2</td></tr>
</table>

A1	A2
B1	B2

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	Output	Codice 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}

A1	A2
B1	B2

A table can be a photo album!

Code

Output

<table>
<tr>
<td><img src="image/album1.jpg" /></td>
<td><img src="image/album2.jpg" /></td>
</tr>
<tr>
<td><img src="image/album3.jpg" /></td>
<td><img src="image/album4.jpg" /></td>
</tr>
</table>

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!

<html>
<head>
<style>
....
table {border:...;background-color:...;  }
td {border: ...; padding: ...; }
</style>
</head>

<body>
..........
 <table>
 <tr>
   <td> insert something here! (Text, images, links!)</td>
   <td> insert something here!</td>
 </tr>
<table>

</body>
</html>

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!

HTML

UNIT 8 TABLES

The tags table, tr, td

A style for the tables: the border

Let's make space: the padding

The background-color

A table can be a photo album!

Create a table in your web page!