1

Tables attributes

2

Table attributes: border

• Activates border around cells

• Syntax:– <table border=“n”> where “n” is a value in

pixels which controls the “thickness” of the border

Note: this attribute can ONLY be used in a transitional doctype.

3

Table attributes: width

• May be set in pixels or as a % of the screen size:– <table width=“95%”>

Note: this attribute can ONLY be used in a transitional doctype.

4

Table attributes: cellpadding and cellspacing

• cellpadding– <table> attribute– Amount of space in pixels between the contents of the

cells and the cell walls– Syntax

• <table cellpadding=“5”>

• cellspacing– <table> attribute– Amount of space between cells– Syntax

• <table cellspacing=“2”>Note: this attribute can ONLY be used in a transitional doctype.

5

Table cells: height and width

• May be set in pixels or as a percentage– <td width=“200”>One</td>

• Use CSS in XHTML strict DTD:– th, td { height: 100px; width: 200px; }

• Certain rules apply to width– <table> values will override <td> values– Specify width at cell level when specification

is necessary

6

<th> attributes: colspan/rowspan

• colspan indicates the number of columns a cell should span

• rowspan indicates the number of rows a cell should span

• Syntax:– <tr colspan=“n”> where “n” is the number of

columns being spanned

Ref: http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_table_span

7

colspan attribute <table border="1">

<tr>

<th>Name</th>

<th colspan="2">Telephone</th>

</tr>

<tr>

<td>Bill Gates</td>

<td>555 77 854</td>

<td>555 77 855</td>

</tr>

</table>

8

rowspan attribute<table border="1"><tr> <th>First Name:</th> <td>Bill Gates</td></tr>

<tr><th rowspan="2">Telephone:</th><td>555 77 854</td></tr>

<tr> <td>555 77 855</td></tr>

</table>