HTML Table Properties

Important HTML Table Attributes
We will learn the following attributes on an HTML Table.

Cell Padding in HTML Table
Cell padding is the value by which the texts inside the cell of an HTML table distance themselves from the
edges of the cell. It’s specified on the table level.

Example

<table cellpadding=30>
<thead>
<th>Heading 1</th>
<th>Heading 2</th>
</thead>
<tbody>
<tr>
<td>Row1, Column1</td>
<td>Row1, Column2</td>
</tr>
<tr>
<td>Row2, Column1</td>
<td>Row2, Column2</td>
</tr>
</tbody>
</table>

Output

Heading 1 Heading 2
Row1, Column1 Row1, Column2
Row2, Column1 Row2, Column2
Cell Spacing in HTML Table

Cellspacing is the value by which the browser keeps apart the cells. That is the gap between the cells to
be maintained by the browser while displaying an HTML table is set by the cellspacing attribute.

Example:

<table cellspacing=30>
<thead>
<th>Heading 1</th>
<th>Heading 2</th>
</thead>
<tbody>
<tr>
<td>Row1, Column1</td>
</tr>
<tr
<td>Row2, Column1</td>
<td>Row2, Column2</td>
</tr>
</tbody>
</table>

Row2, Column1
Heading 1 Heading 2
Row1, Column1
Row2, Column2
Background Color of HTML Elements

Yes, we can set the background color of an entire table or any specific row or cell as per our wish. For
this we have to use the bgcolor attribute at the respective level. The example below will clarify this thing
further.
Example:

<table bgcolor=red>
<thead>
<th bgcolor=pink>Heading 1</th>
<th>Heading 2</th>
</thead>
<tbody>
<tr bgcolor=green>
<td>Row1, Column1</td>
</tr>
<tr>
<td bgcolor=yellow>Row2, Column1</td>
<td> Row2, Column2</td>
</tr>
</tbody>
</table>

Output

Heading 1 Heading 2
Row1, Column1
Row2, Column1 Row2, Column2

Here we specified the background color of the entire table to be red. Then we set the “bgcolor” of the
first column heading to pink. Again we set the bgcolor of the entire first row to green. Finally we specified
the bgcolor of the first cell of the second row to yellow. Notice that the attributes specified at the lowest
level (<td> is the lowest and <table> is the highest level in the example) is the one which is
finally used by the browser while rendering the HTML page. For the second heading, the bgcolor specified
immediately above it, was at the <table> level. So the background color remains red. This is also true
for the second column of the last row.

The bgcolor attribute can be set by either specifying a valid color name or hexadecimal color code.

Backgroungd Image of HTML Elements

We can use an image also as the background of the table. For this we set "background" attribute of an HTML
table. The syntax to use an image as the background for a table is explained below
Example:

<table background="logo.gif">
<thead>
<th>Heading 1</th>
<th>Heading 2</th>
</thead>
<tbody>
<tr>
<td>Row1, Column1</td>
</tr>
<tr>
<td> Row2, Column1</td>
<td> Row2, Column2</td>
</tr>
</tbody>
</table>

Output

Heading 1 Heading 2
Row1, Column1
Row2, Column1 Row2, Column2

The path of the background image can be either the relative or absolute path. Rest of the things is similar
to background color.

Width And Height Attributes in HTML

Width:We can explicitly define the width of an HTML table by using the width attribute of HTML
table. This attribute can be specified at any level of the HTML table. The maximum width of any row of an HTML
table becomes the width of the table

Height:We can explicitly define the width of an HTML table by using the width attribute of HTML
table. This attribute can be specified at any level of the HTML table. If the sum of individual heights of all
the rows of HTML table exceeds the height specified by height attribute at table, then specified height is
neglected.

Example to set width and height of HTML table

<table width=100>
<thead>
<th >Heading 1</th>
<th>Heading 2</th>
</thead>
<tbody>
<tr >
<td width=60>Row1, Column1</td>
<td>Row1, Column 2</td>
</tr>
<tr height=100>
<td>Row2, Column1</td>
<td>Row2, Column2</td>
</tr>
</tbody>
</table>

Output

Heading 1 Heading 2
Row1, Column1 Row1, Column 2
Row2, Column1 Row2, Column2

Here the width of the table is set to 100 units. Width of the first cell of the first row is set to 60 so
it has forced the width of the neighbor cell to 40. What would happen if we set the width of the second cell
to 60? Will the two cells equally distribute the space? With the concept just learnt, you can easily say that
the width of the table itself with increase to accommodate this increased width.

Before ending this topic I would like to repeat that the attributes learnt on this page, bgcolor,
background,width and height are also valid attributes of almost all the HTML elements which are displayed on
the browser. Examples of some of these elements are body, hr, image(width, height, border) etc.

If all the concept about tables in HTML is clear to you then you can take the project of a web page design
based on table.

  • 1967 reads