• <td align=“left|right|center|justify”> …</td> • <td valign=“top|bottom|middle|baseline”> …</td>
• For example…
9/16
Responsible layout tables
• Stick to basic table elements. Use only the minimal table elements. • Keep it simple and lightweight. • Use style sheets for presentation.
Chapter 5 Tables and page layout
1/16
Objectives
• Tell the difference between data tables and layout tables. • Create HTML tables using <table>, <tr>, <td>, <th>, <caption>. • Use the attributes properly: rowspan, colspan, align, valign, cellspacing, cellpadding, width, height. • Use table layout and CSS layout properly.
5/16
Descriptive elements
• Table header cells (indicated by the <th> element) are used to provide important information or context about the cells in the row or column that they precede. • The <caption> element provides a title or brief description of the table. The caption element must immediately follow the opening table tag.
15/16
That’s all for this chapter!
16/16
• For example…
10/16
CSS layouts
<div class=“masthead”> Masthead and headline </div> <div class=“main”> Main article </div> <div class=“sidebar”> List of links </div> <div class=“footer”> copyright information </div>
7/16
Table and cell dimensions
• By default, a table will render just wide enough to contain all of its contents. • You can explicitly specify the width of a table using the width attribute in the table element. • You can control the width and height of individual cells by using the width and height attributes in the td or th element. • For example…
13/16
Homework4 — enhance your site’s layout
• At least 7 pages • Proper navigation • Use tables and/or CSS to lay out the site properly. • Use at least one external style sheet for the whole site（at least 3 class and/or id styles).
2/16
Table uses
• HTML tables fall into 2 broad categories: data tables and layout tables.
– Data tables, the arrangement of information in rows and columns, are the intended use of HTML table elements. Tables may be used to present calendars, schedules, statistics, etc. – Layout tables are used purely as a presentational device for controlling the layout of a page. While we are still in a period of transition from table-based design to totally CSS-based design, some authors still choose to use tables to establish the basic column structure of the page.
4/16
Spanning rows and columns
• Data cells in a table can occupy more than one space in the grid created by the rows and columns. • By specifying <td colspan=“2”>, we can make the cell span over 2 columns. For example, … • By specifying <td rowspan=“2”>, we can make the cell span over 2 rows. For example, …
3/16
Basic table structure
• Web tables are made up of cells (which is where the content goes), arranged into rows. • The minimum elements for defining a table are <table>, for establishing the table itself, <tr>, for declaring a table row, and <td> for creating table cells within the row. • For example…
12/16
Reading assignment
• < An introduction to Web design and programming> • Chapter 2 • Chapter 3 • Chapter 4 • Chapter 5 (5.1-5.6) • Chapter 6 • *Chapter 7 (7.1-7.7)
11/16
CSS layouts
.masthead { background: #CCC; padding: 15px; } .main { float: left; width: 70%; margin-right:3%; marginleft:3%;} .footer { clear: left; /*starts the footer below the floated content */ padding: 15px; background:#666}
8/16
Cell content alignment
• The align and valign attributes are used to specify the horizontal and vertical alignment of content within cells. • Alignment may be specified for the following elements: td, th, tr.
– <caption align=“top|bottom|left|right”> table caption </caption>
6/16
Table cell spacing
• Cell spacing refers to the amount of space that is held between the cells in a table. It is specified with the cellspacing attribute in the table element. • Cell padding refers to the amount of space between the cell’s border and the contents of the cell. It is specified with the cellpadding attribute in the table element. • For e• Tell the difference between data tables and layout tables. • Create HTML tables using <table>, <tr>, <td>, <th>, <caption>. • Use the attributes properly: rowspan, colspan, align, valign, cellspacing, cellpadding, width, height. • Use table layout and CSS layout properly.