---

You'll often need to present large amounts of organized information, and HTML has some wonderful tools to manage this task. HTML has three kinds of lists and a powerful table structure for organizing the content of your page.

Tables display information in rows and columns; they are commonly used to display all manner of data that fits in a grid such as train schedules, television listings, financial reports, and sports results. In this chapter, you learn when to use tables, and the markup that you need to create them.

Building Table

Sometimes, you’ll encounter data that fits best in a tabular format. HTML supports several table tags for this kind of work. You can think of a table as being very similar to a spreadsheet because it is made up of rows and columns, as shown in Figure.

Here you can see a grid of rectangles. Each rectangle is known as a cell . A row is made up of a set of cells on the same line from left to right, and a column is made up of a line of cells going from top to bottom.

Let's look at an example of a very basic XHTML table so that you can see how they are created

Live Preview

Live Preview

<table border="1">
<tr>
<td> Row 1, Column 1 </td>
<td> Row 1, Column 2 </td>
</tr>
<tr>
<td> Row 2, Column 1 </td>
<td> Row 2, Column 2 </td>
</tr>
</table>

By default (in most browsers, anyway), tables don't show their borders. If you want to see basic table borders, you can turn on the table's border attribute. (An attribute is a special modifier you can attach to some tags.)

<table border = "1">

Basic Table Elements and Attributes

Sometimes, you need a little more flexibility in your table design. For that these are some attribute to make our table flexibile

The align Attribute

<table align="center"> 

Html Code

<table border="1" align="left">
<tr>
<td> Row 1, Column 1 </td>
<td> Row 1, Column 2 </td>
</tr>
<tr>
<td> Row 2, Column 1 </td>
<td> Row 2, Column 2 </td>
</tr>
</table>
<p>Although it is deprecated, the align attribute is still frequently used with tables.
When used with the &lt;table&gt;  element, it indicates whether the table should be
 aligned to the left (the default), right , or center of the page.(When used with cells,
 as you will see shortly, it aligns the content of that cell.)</p>
 

Live Preview

Html Code

<table border="1" align="right">
<tr>
<td> Row 1, Column 1 </td>
<td> Row 1, Column 2 </td>
</tr>
<tr>
<td> Row 2, Column 1 </td>
<td> Row 2, Column 2 </td>
</tr>
</table>
<p>Although it is deprecated, the align attribute is still frequently used with tables.
When used with the &lt;table&gt;  element, it indicates whether the table should be
 aligned to the left (the default), right , or center of the page.(When used with cells,
 as you will see shortly, it aligns the content of that cell.)</p>
 

Live Preview

Html Code

<table border="1" align="center">
<tr>
<td> Row 1, Column 1 </td>
<td> Row 1, Column 2 </td>
</tr>
<tr>
<td> Row 2, Column 1 </td>
<td> Row 2, Column 2 </td>
</tr>
</table>
<p>Although it is deprecated, the align attribute is still frequently used with tables.
When used with the &lt;table&gt;  element, it indicates whether the table should be
 aligned to the left (the default), right , or center of the page.(When used with cells,
 as you will see shortly, it aligns the content of that cell.)</p>
 

Live Preview

The bgcolor Attribute

The bgcolor attribute sets the background color for the table. The value of this attribute should either be a color name or a six - digit code known as a hex code . The bgcolor attribute has been replaced by the background-color property in CSS.

<table bgcolor="red">
<tr>
<td> Row 1, Column 1 </td>
<td> Row 1, Column 2 </td>
</tr>
<tr>
<td> Row 2, Column 1 </td>
<td> Row 2, Column 2 </td>
</tr>
</table> 

Live Preview

The border Attribute

Using border attribute, we can create a border around both the table and each individual cell. The value for this attribute is the width you want the outside border of the table to be, in pixels. If we give this attribute a value of 0 , or if you do not use this attribute, then you should not get any borders on either the table or any cells. This has been replaced by the border property in CSS.

<table border="3">
<tr>
<td> Row 1, Column 1 </td>
<td> Row 1, Column 2 </td>
</tr>
<tr>
<td> Row 2, Column 1 </td>
<td> Row 2, Column 2 </td>
</tr>
</table> 

Live Preview

---