HTML Tables

HTML Tables

•Tables are defined with the <table> tag.
•A table is divided into table headers (with the <th> tag),
•A table is divided into rows (with the <tr> tag), and
•each row is divided into data cells (with the <td> tag).
•The letters td stands for “table data,” which is the content of a data cell.
•A data cell can contain text, images, lists, paragraphs, forms, horizontal rules, tables, etc.

<table border=”1″>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>

Output:

row 1, cell 1 row 1, cell 2
row 2, cell 1 row 2, cell 2

Headings in a Table

Headings in a table are defined with the <th> tag.

<table border=”1″>
<tr>
<th>Heading</th>
<th>Another Heading</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2p</td>
</tr>
</table>

OUTPUT:

Heading Another Heading
row 1, cell 1 row 1, cell 2
row 2, cell 1 row 2, cell 2p

Spanning Multiple Rows and Cells

Use rowspan to span multiple rows & colspan to span multiple columns.

To display a table with borders, you will have to use the border attribute:

<table border=”1″>
<tr>
<td>column1</td>
<td>column2</td>
<td>column3</td>
</tr>
<tr>
<td rowspan=”2″>row 1, cell 1</td>
<td>row 1, cell 2</td>
<td>row 1, cell 3</td>
</tr>
<tr>
<td>row 2, cell 2</td>
<td>row 2, cell 3</td>
</tr>
<tr>
<td colspan=”3″>row 3, cell 1</td>
</tr>
</table>

OUTPUT:

column1

column2

column3

row 1, cell 1

row 1, cell 2

row 1, cell 3

row 2, cell 2

row 2, cell 3

row 3, cell 1

Cell Padding and Spacing

You will be able to adjust the white space on your tables with the cellpadding and cellspacing attributes .Padding represents the distance between cell borders and the content within, while spacing defines the width of the border.

<table border=”1″ cellspacing=”10″>
<tr>
<td >row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>

O/P: Table with Cellspacing

row 1, cell 1

row 1, cell 2

row 2, cell 1

row 2, cell 2

<table border=”1″ cellpadding=”10″>
<tr>
<td >row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>

OUTPUT: Table with Cellpadding

row 1, cell 1

row 1, cell 2

row 2, cell 1

row 2, cell 2

HTML Table Tags

Tag

Description

<table>

Defines a table

<th>

Defines a table header

<tr>

Defines a table row

<td>

Defines a table cell

<caption>

Defines a table caption

<colgroup>

Defines a group of columns in a table, for formatting

<col />

Defines attribute values for one or more columns in a table

<thead>

Groups the header content in a table

<tbody>

Groups the body content in a table

<tfoot>

Groups the footer content in a table