JavaScript Tutorial JavaScript Examples CSS Tutorial HTML Tutorial About Us

Lesson 10: Table Attributes in html


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.

10.2 The colour Attributes

* 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:

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:<

10.6  The Rowspan and Colspan attributes

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 ❯


Copyright©2008 Dr.Liew Voon Kiong. All rights reserved |Contact|Privacy Policy