Lesson 10: Table Attributes in html

❮ Previous Lesson Next Lesson ❯

In HTML, you can add attributes to the table elements to format the outlook of the table.

10.1 The border attributes

The border attributes has a value of 0 or an integer n.

<table border="0"> The table has no border
<table border="n"> The table has a border with size=n

10.2 The colour Attributes

<table bgcolor="blue"> The table has blue background.
<tr bgcolor="green"> The row has green background.
<td bgcolor="yellow"> The cell has yellow background.
<table bordercolor="magenta"> The table a magenta border
<tr bordercolor="pink"> The row has pink border.
<td bordercolor="brown"> The cell has brown border.

* you could use hexadecimal code for the color attributes.

10.3 The Height and Width attributes

The height and width attributes of the table element specify the height and the width of a table.

Example:

10.4 The Table Spacing Attributes

The attributes for table spacing are cellspadding and cellspacing , the syntaxes are as follows:

<table cellspadding="2"> The amount of space between a cell's border and its contents is 2
<table cellspacing="1"> The amount of space between the cells is 1.

10.5 The Text Alignment Attributes in a Table

The text alignment attributes of a table are aligned and valign, the syntaxes are as follows:<

<tr align="position"> Aligns the text in a row to the left, center or right
<tr valign="position"> Aligns the text in a row vertically (top, bottom or middle)
<td align="position"> Aligns the text in a cell to the left, center or right.
<td valign="position"> Aligns the text in a cell vertically(top, bottom or middle)

10.6 The Rowspan and Colspan attributes

<td rowspan=3> The cell spans over 3 rows
< td colspan-2> The cell spans over 2 columns.

10.7 The Colgroup and the Col Elements

The element colgroup groups and formats columns of a table. The col element uses the align attribute to determine the text alignment in a column. Besides, the col element also consists of the span attribute that determines the number of columns it will create. The structure is as follows: <colgroup> <col align="center" span="2"> </colgroup>

Example 10.1

<html>
<head>
<title>Advance Table Tags</title>
<body>
<table border="5"  cellspacing="0" cellspadding="2" bgcolor="blue"width="70%" height="90%">
<caption align=top><h2>This is a colourful table</h2></caption><col group><col align="left" span="2"></colgroup>
<tr bgcolor="cyan" bordercolor="green">
<td></td>
<td align="center" valign="middle">Monday</td>
<td align="right" valign="middle">Tuesday</td>
<td align="center" valign="middle">Wednesday</td>
<td align="right" valign="middle">Thursday</td></tr>
<tr>
<td rowspan="3"  bgcolor="pink">Subject</td>
<td bgcolor="cc33ff">Management</td>
</tr>
<tr>
<td bgcolor="cc88bb">Finance</td>
<td bgcolor="bbffee">Business Law</td>
</tr>
<tr>
<td colspan="2"></td>
<td bgcolor="9966cc">Economics</td>
<td bgcolor="88ccaa">HRM</td>
</tr>
</table>
</body>
</html>

Copy the codes above and paste them into your notepad. Save as table2.html

The output is as follows:

This is a colourful table
	Monday	Tuesday	Wednesday	Thursday
Subject	Management
	Finance	Business Law
			Economics	HRM

❮ Previous Lesson Next Lesson ❯