Title: HTML%20Tables
1 2Tables
- Tables can be a great help in overcoming HTML's
vertical orientation. - Even the most complex tables use just the
following three tags - lttablegt Creates the table
- lttrgt Table row
- lttdgt Table column
3Page Layout
- Tables open up many possibilities for page
layout. - You have more control over the placement of
elements.
4Page 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.
5Web page layout using tables
- Financial Times http//news.ft.com/home/us/
- Calendar of Events http//www.cs.depaul.edu/calen
dar/calendar.asp - http//events.tc.umn.edu/months.xml
- CTI homepage
- http//www.cs.depaul.edu/news/default.asp
6Using Tables for Positioning
- Map out your design on paper first.
- Don't turn off the border until you are satisfied
with the page.
7Planning 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
8How would you use tables?
9How would you use tables?
10Basic HTML Tables
- A table organizes data in rows and columns (of
columnsof cells) - lttablegt lt/tablegt Enclose the table structure
- lttrgt lt/trgt Table row
- lttdgt lt/tdgt Each data cell within a row. The
smallest area of the table we are able to format
11Basic table structure
- lttablegt
- lttrgt
- lttdgtA1lt/tdgt
- lttdgtA2lt/tdgt
- lttdgtA3lt/tdgt
- lt/trgt
- lttrgt
- lttdgtB1lt/tdgt
- lttdgtB2lt/tdgt
- lttdgtB3lt/tdgt
- lt/trgt
- lt/tablegt
A1 A2 A3
B1 B2 B3
12Table Caption and Headers
- ltcaption alignvaluegtlt/captiongt A caption is
centered at the TOP/BOTTOM of the table. - ltthgt lt/thgt special cells that act as table
headers (centered and boldface)
lttablegt ltcaptiongtThis is a tablelt/captiongt
lttrgt ltthgtFirst Rowlt/thgt lt/trgt
lttrgt lttdgtA1lt/tdgt lt/trgt lt/tablegt
This is a table
First row
A1
Html_table.htm
13lttablegt 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
14More lttablegt Attributes
- bordercolorcolor? changes the color of the
border - bordercolordarkcolor?bordercolorlightcolor?
creates a 3D effect for the border
15More ltTablegt attributes
- frameoption Controls which side of the table
has borders - Where option can be one of the following
16More ltTablegt attributes
- rulesallrowscolsnone? controls around which
cell the border is drawn.
17lttablegt,lttdgt,ltthgt attributes
- widthpixels or ? Table/cell width in pixels
or as of the page/table - heightpixels or ? Same as above
- bgcolorcolor? Change the table/cell background
color - backgroundpic.jpg? Tiles a picture as a
background
18Cell attributes (lttdgt,ltthgt)
- colspan? this cell spans for columns
- rowspan? this cell spans for rows
- align
- valign
left/right? text in the cell is aligned
left/right center? text in the cell is centered
top/bottom? text in the cell is aligned
top/bottom middle? text in the cell is aligned
with the middle of the cell
19Align and valign attributes
20Exercise
- Design the following table in FrontPage. Check
the HTML to see how the cells are merged.
Logo Logo Link
A B CD
E F CD
21Using 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
22See in practice
23Tables and graphics
How many rows and columns?
Topframe.htm
24Final remarks
- Work plan
- Diagram the layout before you start writing
- Create the text for various cols in separate
files, to insert later. - Start from the outer table first, and gradually
work inward - Use cell padding cell spacing to avoid
overcrowded web pages - Use the valigntop attribute for cells
containing articles/text. - Use no more than three/four cols of text. Keep
the layout of your web page simple!