Html tutorial lesson 10: Advanced Table Elements and Attributes

[Lesson 9]<<[Contents]>>[Lesson 11]

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:

<table  width=”40%” height=”20%”>

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 align 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 determine 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

[Lesson 9]<<[Contents]>>[Lesson 11]