Tables (advanced)

 

Rowspan

 

Rowspan allows a cell to span (merge) multiple rows.

 

HTML Example:

 

<table border="1" cellpadding="5" cellspacing="5" width="500">

<tr><td rowspan="2">Table cell 1</td>      <td>Table cell 2</td>
</tr>

<tr><td>Table cell 3</td>
</tr>

</table>

 

Result:

 

Table cell 1

Table cell 2

Table cell 3

 

 

 

 

 

 

NOTE: Do not add width size for the colspan <td>

 

 

Table Alignment Attributes


align: to align table elements horizontally.
Values:
• left                • center          • right

 

valign: to align table elements vertically.
Values:
• top                • middle         • bottom         • baseline

 

 

NOTE: align and valign attributes could be used either inside <tr> or <td> tags.

 

 

HTML Example for align:

 

<table border="1" cellpadding="5" cellspacing="5" width="800">

<tr><td align="left">Aligned to left</td>
<td align="center">Aligned to center</td>
<td align="right">Aligned to right</td>
</tr>

</table>


Result:

 

Aligned to left

Aligned to center

Aligned to right

 

 

 

HTML Example for valign:

 

<table border="1" cellpadding="5" cellspacing="5" width="500" height="100">

<tr><td valign="top">Aligned to top</td>
<td valign="middle">Aligned to middle</td>
<td valign="bottom">Aligned to bottom</td>
</tr>

</table>

 

 

Result:

 

Aligned to top

 

Aligned to middle

Aligned to bottom

 

 

 

 

 

 

 

Buy "Digest Web Design" PDF Book

 

All the information on this website is also provided in a PDF book for only $30.
Click here to buy.

 

 

<<    Previous Page                                                                    Next Page    >>