Tables

<img> tag has enough attributes to handle images on a web page

<img src=“boat.gif” alt=“Big Boat” border=“2” width=“30” height=“50” align=“bottom” hspace=“5” vspace=“5” usemap=“map1” />

Images can be used as hyperlinks• Replace the visible part of the tag by the image tag

<a href=www.neu.edu >

<img src=“NUImage.jpg></a>

The <area> tag is used to define one sub-image shape at a time (origin top left)

<<imgimg src="foodMenu.jpg" usemap="#menuMap" /> src="foodMenu.jpg" usemap="#menuMap" /><<mapmap name="menuMap"> name="menuMap"> <<areaarea href="http://www.burgerking.com" alt="Appetizers" shape="rect" coords="10,25,90,60" /> href="http://www.burgerking.com" alt="Appetizers" shape="rect" coords="10,25,90,60" /> <<areaarea href="http://www.legalseafood.com" alt="Meals” shape="poly” href="http://www.legalseafood.com" alt="Meals” shape="poly” coords="100,60,210,60,150,10" />coords="100,60,210,60,150,10" /> <<areaarea href="http://www.pizzahut.com" alt="Pizza" shape="circle" coords="252,40,35" /> href="http://www.pizzahut.com" alt="Pizza" shape="circle" coords="252,40,35" /></</mapmap>>

Restaurant Image MapRestaurant Image Map

Appetiser asAppetiser asrectanglerectangle

Meals as triangleMeals as triangle

Pizza asPizza ascirclecircle

A table is defined as a region that has rows and columns of small rectangles (cells) that are arranged in a certain way that make up the table layout

XHTML provides many variables that allow web authors to control table layout

Table variables may be grouped into 2 categories:• Non-cell variables• Cell variables

Non-cell variables control the properties and structure of the table:

• caption is the title of the table• summary provides a longer description • border is the table’s outside border• header is the first row of the table • width is total width of table• height is total height of table

Height

Heading 1 Heading 2 Heading 3

Cell(1,1) Cell(1,2) Cell(1,3)

Cell(2,1) Cell(2,2) Cell(2,3)

Cell(3,1) Cell(3,2) Cell(3,3)

Cell(4,1) Cell(4,2) Cell(4,3)

Cell(5,3)Cell(5,2)

Cell(6,3)Cell(6,2)Cell(6,1)

Cell(5,1)

Width

Border

Rows

Columns

Cells are the basic units that make up the table

The horizontal and vertical lines that separate the cells are known as rulings/rules

Cell variables control the properties and structure of individual cells:• Row span• Column span• Padding • Spacing• Alignment

Cell spacing describes the amount of the horizontal and vertical spacing between cells

Specifying cell padding is equivalent to specifying top, bottom, left and right margins inside the cell

Cell content can be aligned within each cell

There are 5 important tags:• <table> - Encloses all other table tags

Attributes: summary, width, height, border, align, rules, cell spacing and cell padding

• <caption> - Assigns a title to the table Attributes: align

• <tr> - Creates a table row Attributes: align

• <th> - Creates a table header (row or column) Attributes: abbr, headers, rowspan, colspan, nowrap, align

• <td> - Creates table data (cells) Attributes: abbr, headers, rowspan, colspan, nowrap, align,

valign

<table border=“2” summary="This is a Sample Table" width="400" <table border=“2” summary="This is a Sample Table" width="400" height="200"> height="200"> <caption align="center">This is a Sample Table</caption><caption align="center">This is a Sample Table</caption> <tr align="center"> <tr align="center">

<th>1st Heading</th><th>1st Heading</th><td bgcolor="yellow">Cell 1</td><td bgcolor="yellow">Cell 1</td><td>Cell 2</td><td>Cell 2</td>

</tr> </tr> <tr align="center"> <tr align="center">

<th>Second</th><th>Second</th><td bgcolor="yellow">Cell 3</td><td bgcolor="yellow">Cell 3</td><td>Cell 4</td><td>Cell 4</td>

</tr></tr> <tr align="center"><tr align="center">

<th>Last One</th><th>Last One</th><td bgcolor="yellow">Cell 5</td><td bgcolor="yellow">Cell 5</td><td>Cell 6</td><td>Cell 6</td>

</tr></tr></table></table>

11stst headingheading

Cell 1 Cell 2

SecondSecond Cell 3 Cell 4

Last OneLast One Cell 5 Cell 6

This is a Sample TableThis is a Sample Table

Table nesting is used to control formatting Code is quite complex A table is nested by having a table inside

another table Tables can be nested by using a <table> tag

after <td> Nesting tables may produce awkward results

• Table cell sizes may vary greatly• Location of empty cells may not be acceptable to

web authors

<table align="center" border="4" bgcolor="#FFFF00"><tr>

<td>Cell 1</td><td>Nested Tables

<table align="center"> <tr>

<td>T21</td> <td>T22</td> <td>T23</td></tr>

</table></td><td align="center">Cell 3</td><td valign="bottom">Cell 4</td>

</tr><tr>

<td>Cell 5</td><td>Cell 6</td><td>Cell 7</td><td>Cell 8</td>

</tr><tr>

<td>Cell 9</td><td>Cell 10</td><td>Cell 11</td><td>Cell 12</td>

</tr></table>

Formatting web pages using tables has the same idea as that of nesting tables• A web page layout is divided into regions• Then a table or a cell is substituted for each region

Tables • Tables organize and structure web pages• There are table-level and cell-level variables• There are 5 important tags to use a table

table caption tr th td

• Tables can be nested for better structure • Table are extensively used for formatting entire web

pages

Steven M. Schafer (2005), HTML, CSS, JavaScript, Perl, and PHP Programmer's Reference, Hungry Minds Inc,U.S.

Dan Cederholm (2005), Bulletproof Web Design: Improving Flexibility and Protecting Against Worst-Case Scenarios with XHTML and CSS, New Riders.

Ibrahim Zeid (2004), Mastering the Internet, XHTML, and Javascript