HTML Tables part 1

Tables

Part1

Tables are used to present data in a grid format to give more readability to your data they also provide a powerful structure for organizing your page layout.

A table is divided into rows .Each row is divided into cells . To start an HTML table the <table> tag is used. Attributes may be added to control how a table will appear on the screen .

<Table border=n>

where n is a number presenting borders thickness. <table borders=0> is a table having invisible border.

<tr> tag define a row in a table , while <td> is used to define a cell in a table.

The following example demonstrates how to draw a table.

<html>

<head>

<title>Html page with lists</title>

</head>

<h1 align="center">Html Tables</h1>

<p>

<tr>

<td> Cell row1 column 1</td>

<td> Cell row1 column 2</td>

<td> Cell row1 column 3</td>

</tr>

<tr>

<td> Cell row2 column 1</td>

<td> Cell row2 column 2</td>

<td> Cell row2 column 3</td>

</tr>

<td> Cell row3 column 1</td>

<td> Cell row3 column 2</td>

<td> Cell row3 column 3</td>

</tr>

</table>

</body>

</html>

To change the table borders color simply add the bordercolor attribute.

<table border="1" bordercolor="red">

You can increase the space within the table cells and the space between the cells by using the cellpadding and cellspacing attributes.

cellspacing attribute adjusts the space between the cells

cellpadding adjusts the space within (around) the cell.

<table border="1" cellspacing="12" cellpadding="2">

You can specify the width or height of a table by using either a percentages or pixels.

<table border="1" width="100%" height="90%">

<table border="1" width="640" height="400">

To change columns width or height. Set the width attribute values on your table <td> cells(pixels or percentage) .

<tr><td width="70%" height=50%>A</td> <td width="10%">B</td> <td width="20%">C</td> </tr>

<tr><td width="20" height=30">A</td> <td width="10%">B</td> <td width="20%">C</td> </tr>

Cells contents can be horizontally (left, center ,right) aligned by using the align attribute.

</table>

Cells contents can be vertically (top, middle, bottom) aligned by using the valign attribute

</table>

Note that you can combine these attributes

<td align="left" valign="bottom">

<td height="25" width="80" align="left" valign="bottom">

Applying colors to a table is done by using the bgcolor attribute in the following

manner

<table bgcolor="#5500ff">

color the area behind the entire table

<tr bgcolor="#5500ff">

color the area behind a single row

<td bgcolor="#5500ff">

color the area behind a single cell