网页制作中的表格与布局(英文版)
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
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.
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).
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)
• 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>
• <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.
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.
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.
– The secret to keeping a layout table simple and streamlined is to use it only to establish a basic layout grid and to use CSS for everything else related to presentation.
15/16
That’s all for this chapter!
16/16
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, …
11/16
CSS layoutsຫໍສະໝຸດ Baidu
.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}
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.
– <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 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…
14/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.
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…
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.
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).
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)
• 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>
• <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.
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.
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.
– The secret to keeping a layout table simple and streamlined is to use it only to establish a basic layout grid and to use CSS for everything else related to presentation.
15/16
That’s all for this chapter!
16/16
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, …
11/16
CSS layoutsຫໍສະໝຸດ Baidu
.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}
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.
– <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 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…
14/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.
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…