Transcript Tables

HTML Tables
Instructor: A. Burns
1
Tables


Tables can be a great help in overcoming
HTML's vertical orientation.
Even the most complex tables use just the
following three tags:



<table> Creates the table
<tr> Table row
<td> Table column
Instructor: A. Burns
2
Page Layout


Tables open up many possibilities for page
layout.
You have more control over the placement of
elements.
Instructor: A. Burns
3
Page Layout


The look and layout of pages on a Web site
should reflect the purpose of the site and
contribute to the site's usability.
Good design can make a page not only
appealing but usable.
Instructor: A. Burns
4
Web page layout using tables



Financial Times: http://news.ft.com/home/us/
Calendar of Events:
http://www.cs.depaul.edu/calendar/calendar.asp
http://events.tc.umn.edu/months.xml
CTI homepage
http://www.cs.depaul.edu/news/default.asp
Instructor: A. Burns
5
Using Tables for Positioning


Map out your design on paper first.
Don't turn off the border until you are satisfied
with the page.
Instructor: A. Burns
6
Planning a Layout


On paper, get a rough idea of where you want
certain elements to be
Then draw out a basic grid structure for your page
Instructor: A. Burns
7
How would you use tables?
Instructor: A. Burns
8
How would you use tables?
Instructor: A. Burns
9
Basic HTML Tables




A table organizes data in rows and columns (#of
columns=#of cells)
<table> … </table> Enclose the table structure
<tr> … </tr> Table row
<td> … </td> Each data cell within a row. The
smallest area of the table we are able to format
Instructor: A. Burns
10
Basic table structure
<table>
<tr>
<td>A1</td>
<td>A2</td>
<td>A3</td>
</tr>
<tr>
<td>B1</td>
<td>B2</td>
<td>B3</td>
</tr>
</table>
First row
First Column
Instructor: A. Burns
A1
A2
A3
B1
B2
B3
11
Table Caption and Headers


<caption align=value>…</caption> A caption is
centered at the TOP/BOTTOM of the table.
<th> … </th> special cells that act as table
headers (centered and boldface)
<table>
<caption>This is a table</caption>
<tr>
<th>First Row</th>
</tr>
<tr>
<td>A1</td>
</tr>
</table>
Instructor: A. Burns
This is a table
First row
A1
Html_table.htm
12
<table> attributes




border=“# pixels” Size of the border around
the table
cellspacing =“# pixels” space inserted
between cells (outside cell contents)
cellpadding =“# pixels” size of the gap
between the cell text and the cell border (inside cell
contents)
align =
left/right table is placed on the left/right and
text is wrapped around the table
center  table is placed in the center of the page.
Text is not wrapped around the table
Instructor: A. Burns
13
More <table> Attributes

bordercolor=“color”
changes the color of the border

bordercolordark=“color”
bordercolorlight=“color” creates a 3D
effect for the border
Instructor: A. Burns
14
More <Table> attributes


frame=“option” Controls which side of the table has borders
Where option can be one of the following:
Instructor: A. Burns
15
More <Table> attributes

rules=all|rows|cols|none controls around
which cell the border is drawn.
Instructor: A. Burns
16
<table>,<td>,<th> attributes




width=“pixels” or “%” Table/cell width in
pixels or as % of the page/table
height=“pixels” or “%” Same as above
bgcolor=“color” Change the table/cell
background color
background=“pic.jpg” Tiles a picture as
a background
Instructor: A. Burns
17
Cell attributes (<td>,<th>)



colspan=“#” this cell spans for # columns
rowspan=“#” this cell spans for # rows
align=
left/right text in the cell is aligned left/right
center text in the cell is centered

valign=
top/bottom text in the cell is aligned top/bottom
middle text in the cell is aligned with the middle
of the cell
Instructor: A. Burns
18
Align and valign attributes
Instructor: A. Burns
19
Exercise
Design the following table in FrontPage. Check the
HTML to see how the cells are merged.
Logo
Link
A
B
E
F
CD
Instructor: A. Burns
20
Using tables for page layout





To display content in newspaper-like columns or
separates the page in different topical areas.
Start with the outer table and work your way in using
nested tables
Add background color to visually separate column
Add cell padding to avoid crowding
Do not use too many nested tables – it slows down
the web page & may confuse browsers!
HTMLLayout.htm
Instructor: A. Burns
21
Outer table
<body background="RedBar.jpg"
<table width=“740" >
<tr>
<td width=“20%" > Image+links</td>
<td width=“80%" >
Nested Table
</td>
</tr>
</table>
Nested table
See in practice
<table width=“590“>
<tr><td colspan=2 width=“”>Logo</td>
</tr>
<tr><td rowspan=2 width=“440”>Main</td>
<td width=“150”>Side note</td>
</tr>
<tr><td width=“150”>Another note</td>
</tr>
</table>
Instructor: A. Burns
22
Tables and graphics
How many rows and columns?
Topframe.htm
Instructor: A. Burns
23
Final remarks
Work plan:
1. Diagram the layout before you start writing
2. Create the text for various cols in separate files, to insert later.
3. Start from the outer table first, and gradually work inward



Use cell padding & cell spacing to avoid overcrowded web pages
Use the valign=“top” attribute for cells containing articles/text.
Use no more than three/four cols of text. Keep the layout of your
web page simple!
Instructor: A. Burns
24