HTML

Chapter 11 Advanced Layout with

Tables

Developing a Web Site 1

Objective

 You will learn to

 to build HTML tables and how to control the
spacing, layout, and appearance of the
tables you create.

Developing a Web Site 2

Table

 A table is an orderly arrangement of text

and/or graphics into vertical columns and
horizontal rows.
 Tag: <table>…</table>

Developing a Web Site 3

Table - continued
 Attributes: border(in pixels), bordercolor(the
color of border), width(in pixels/percentages),
height(in pixels/percentages),
bgcolor(background color),
background(background picture),
cellspacing(sets the amount of space in pixels
between table borders and table cells),
cellpadding(sets the amount of space in pixels
around the edges of information in the cells)

Developing a Web Site 4

Table Row

 Table row contains of one or more cells

of information.
 Tag: <TR>…</TR>
 Attributes: align(horizontal alignment:
left, right or center), valign(vertical
alignment: top or bottom),
bgcolor(background color)

Developing a Web Site 5

Table Column

 Table column is a cell which can contain

any text, images, and HTML tags.
 Each row in a table should have the
same number of columns as the other
rows.
 Tag: <TD>…</TD>

Developing a Web Site 6

Table Column - continued
 Attributes: width(in pixels/percentages),
height(in pixels/percentages),
align(horizontal alignment: left, right or
center), valign(vertical alignment: top or
bottom), colspan(a single cell spans
more than one column), rowspan(a
single cell spans more than one row),
bgcolor(background color),
background(background picture)

Developing a Web Site 7

Nested Table

 A table within a table cell.

Developing a Web Site 8

Example of Creating Table with Text

<table border="5">
<tr><td>Mon</td>
<td>9am-12pm</td>
<td>Lab 1</td>
<td>Developing a Web Site</td></tr>
<tr><td>Tue</td>
<td>2pm-5pm</td>
<td>Lab 4</td>
<td>Structured Programming</td></tr>
</table>

Developing a Web Site 9

Example of Creating Table with
HTML Tag
<table border="5">
<tr>
<td>Mon</td>
<td>9am-12pm</td>
<td><b>Lab 1</b></td>
<td><font size="5" color="blue">Developing a
Web Site</font></td>
</tr>
</table>

Developing a Web Site 10

Example of Creating Table with
Image
<table border="5” bordercolor="#0F12AB">
<tr>
<td><font color="red">Toyota</font></td>
<td><font color="red">Camry</font></td>
</tr>
<tr>
<td>&nbsp;</td>
<td><img src="car.jpg"</td>
</tr>
</table>

Developing a Web Site 11

Example of Setting the Table Size

<table border="5" bordercolor="#0F12AB"

width="250“ height="150">
<tr><td width="30%" height="10%">&nbsp;</td>
<td width="70%">&nbsp;</td>
</tr>
<tr><td height="90%">&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>

Developing a Web Site 12

Examples of Aligning the Text
<table border="5" bordercolor="#0F12AB" width="250"
height="150">
<tr align="right">
<td width="30%" height="10%">Hello!!</td>
<td width="70%">How are you?</td>
</tr>
<tr>
<td height="90%" align="center">I am fine.</td>
<td>Thank you.</td>
</tr>
</table>

Developing a Web Site 13

Examples of Aligning the Text -
continued
<table border="5" bordercolor="#0F12AB" width="250"
height="150">
<tr valign="top">
<td width="50%" height="50%">Hello!!</td>
<td width="50%" valign="bottom" align="right">How
are you?</td>
</tr>
<tr valign="bottom" align="center">
<td height="50%">I am fine.</td>
<td>Thank you.</td>
</tr>
</table>

Developing a Web Site 14

Examples of Aligning the Images
<table border="5" bordercolor="#0F12AB"
width="600“ height="150">
<tr align="right">
<td width="50%" height="10%"
align="center"><img src="pic1.jpg"></td>
<td width="50%"><img src="car.jpg"
width="200"></td>
</tr>
</table>

Developing a Web Site 15

Examples of Aligning the Images -
continued
<table border="5" bordercolor="#0F12AB"
width="600"
height="150">
<tr align="right">
<td width="50%" height="10%" align="center"
valign="top"></td>
<td width="50%" valig"><img
src="pic1.jpgn="bottom"><img
src="car.jpg" width="200"></td>
</tr>
</table>

Developing a Web Site 16

Example of Row and Column
Spanning
<table border="5" bordercolor="#0F12AB" width="600"
height="150">
<tr><td rowspan="4">&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr><td>&nbsp;</td>
<td colspan="2">&nbsp;</td>
<td>&nbsp;</td>
</tr>

Developing a Web Site 17

Example of Row and Column
Spanning -continued
<tr><td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr><td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>

Developing a Web Site 18

Example of Setting Background
Color
<table border="5" bordercolor="#0F12AB" width="600"
height="150“ bgcolor="#22FF99">
<tr><td bgcolor="red">&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td bgcolor="black">&nbsp;</td>
</tr><tr bgcolor="purple">
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr></table>

Developing a Web Site 19

Examples of Setting Background

<table border="5" bordercolor="#0F12AB"

width="600" height="150"
background="pic1.jpg">
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>

Developing a Web Site 20

Examples of Setting Background -
continued
<table border="5" bordercolor="#0F12AB"
width="600" height="150">
<tr><td>&nbsp;</td>
<td
background="house.gif">&nbsp;</td>
<td>&nbsp;</td>
<td background="car.jpg">&nbsp;</td>
</tr></table>

Developing a Web Site 21

Example of Setting the Spaces
around the Borders of a Table
<table border="5" bordercolor="#0F12AB"
width="600" height="50" cellpadding="10"
cellspacing="8">
<tr>
<td>Hello</td>
<td>How are you?</td>
<td>I am fine.</td>
<td>Thank you.</td>
</tr>
</table>

Developing a Web Site 22

Example of Nested Table
<table border="5" bordercolor="#0F12AB" width="600"
height="50" cellpadding="10" cellspacing="8">
<tr><td>Hello</td>
<td><table border="10" bordercolor="red"
width="100%">
<tr><td>This is another table.</td><td>&nbsp;</td></tr>
<tr><td>&nbsp;</td><td>&nbsp;</td></tr>
</table>
</td>
<td>I am fine.</td>
<td>Thank you.</td>
</tr></table>

Developing a Web Site 23

Summary
 You have learned how to arrange text and
images into organized arrangements or rows
and columns, called tables. You learned the
three basic tags for creating tables, and many
optional attributes for controlling the alignment,
spacing, and appearance of tables. You also
saw that tables can be nested within one
another for an even wider variety of layout
options.

Developing a Web Site 24