1 HTML Tables. 2 Tables Tables can be a great help in overcoming HTML's vertical orientation. Even...
25
1 HTML Tables
-
date post
20-Dec-2015 -
Category
Documents
-
view
214 -
download
1
Transcript of 1 HTML Tables. 2 Tables Tables can be a great help in overcoming HTML's vertical orientation. Even...
1
HTML Tables
2
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
3
Page Layout
Tables open up many possibilities for page layout.
You have more control over the placement of elements.
4
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.
5
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
6
Using Tables for Positioning
Map out your design on paper first. Don't turn off the border until you are satisfied
with the page.
7
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
8
How would you use tables?
9
How would you use tables?
10
Nesting Tables
11
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
12
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>
A1 A2 A3
B1 B2 B3
First row First
Column
Example by alan burns
Instructor: A. Burns13
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>
First row
A1
This is a table
Html_table.htm
14
<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
15
More <table> Attributes
bordercolor=“color” changes the color of the border
bordercolordark=“color”bordercolorlight=“color” creates a 3D effect for the border
16
More <Table> attributes
frame=“option” Controls which side of the table has borders Where option can be one of the following:
17
More <Table> attributes
rules=all|rows|cols|none controls around which cell the border is drawn.
18
<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
19
Cell attributes (<td>,<th>)
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 centeredtop/bottom text in the cell is aligned top/bottom
middle text in the cell is aligned with the middle of the cell
20
Align and valign attributes
21
Exercise
Design the following table in FrontPage. Check the HTML to see how the cells are merged.
Logo Link
A B CD
E F
22
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
23
<body background="RedBar.jpg"
<table width=“740" >
<tr>
<td width=“20%" > Image+links</td>
<td width=“80%" >
Nested Table </td>
</tr>
</table>
Outer table
<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>
Nested table See in practice
24
How many rows and columns?
Tables and graphics
25
Final remarks
Work plan: 1. Diagram the layout before you start writing2. 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!
