HTML TABLE (+FORMATTING)

TABLE ( = FORMATTING)

INTRODUCTION

The HTML tables allow web authors to arrange data like text, images, links, other tables, etc. into rows and columns of cells.

The HTML tables are created using the <table> tag in which the <tr> tag is used to create table rows and <td> tag is used to create data cells. The elements under <td> are regular and left aligned by default.

Table Heading

Table heading can be defined using <th> tag. This tag will be put to replace <td> tag, which is used to represent actual data cell. Normally you will put your top row as table heading as shown below, otherwise you can use <th> element in any row. Headings, which are defined in <th> tag are centered and bold by default.

Tables Backgrounds

You can set table background using one of the following two ways −

• bgcolor attribute − You can set background color for whole table or just for one cell.
• background attribute − You can set background image for whole table or just for one cell.

You can also set border color also using bordercolor attribute.

<table>...</table>

The table tag identifies and contains all table related content.

<caption> ...</caption>

The caption is a description of what the table is and what it contains.

<thead> ... </thead>

The table headers describe the type of information contained in each coloum underneath.

<tbody> ... </tbody>

The table contains the table's data or information.

<tfoot> .. </tfoot>

Table footers describe all footer content.

<tr> ... </tr>

Contains the information to be included in a single row of the table.

<th> ... </th>

Contains the actual information to be included in a single row of the table.

<td> ... </td>

Contains the actual information or data in a single table cell.

<colgroup> ... </colgroup>

Groups a single (or multiple) column for formatting purposes.

<col / >

Defines a single column of information inside a table.

EXAMPLE

<table>

<colgroup>

<col span="2" style="background-color:#181alt">

<col style="background-color:#2c323c">

</colgroup>

<tr>

<th>isbn</th>

<th>tilte</th>

<th>price</th>

</tr>

<tr>

<td>3476896</td>

<td>my first html</td>

<td>$53</td>

</tr>

</table>

SAMPLE