tutorial 5 working with web tables. xp objectives explore the structure of a web table create...
TRANSCRIPT
![Page 1: Tutorial 5 Working with Web Tables. XP Objectives Explore the structure of a Web table Create headings and cells in a table Create cells that span multiple](https://reader036.vdocuments.net/reader036/viewer/2022062516/56649e2a5503460f94b17d49/html5/thumbnails/1.jpg)
Tutorial 5
Working with Web Tables
![Page 2: Tutorial 5 Working with Web Tables. XP Objectives Explore the structure of a Web table Create headings and cells in a table Create cells that span multiple](https://reader036.vdocuments.net/reader036/viewer/2022062516/56649e2a5503460f94b17d49/html5/thumbnails/2.jpg)
XPXPXPXPXPObjectives• Explore the structure of a Web table• Create headings and cells in a table• Create cells that span multiple rows and columns• Create row and column groups• Add a caption and a summary to a table• Format a table using HTML attributes
2New Perspectives on HTML and XHTML, Comprehensive
![Page 3: Tutorial 5 Working with Web Tables. XP Objectives Explore the structure of a Web table Create headings and cells in a table Create cells that span multiple](https://reader036.vdocuments.net/reader036/viewer/2022062516/56649e2a5503460f94b17d49/html5/thumbnails/3.jpg)
XPXPXPXPXPObjectives• Format a table using CSS styles• Collapse table borders• Display page elements in tabular form• Create a jigsaw layout• Explore the use of tables for page layout• Create rounded borders
3New Perspectives on HTML and XHTML, Comprehensive
![Page 4: Tutorial 5 Working with Web Tables. XP Objectives Explore the structure of a Web table Create headings and cells in a table Create cells that span multiple](https://reader036.vdocuments.net/reader036/viewer/2022062516/56649e2a5503460f94b17d49/html5/thumbnails/4.jpg)
XPXPXPXPXPIntroducing Web Tables• Each table in a Web page follows a basic structure consisting of the
table element and a collection of table rows nested in the table element<table>
<tr>table cells</tr><tr>table cells</tr>...
</table>
New Perspectives on HTML and XHTML, Comprehensive 4
![Page 5: Tutorial 5 Working with Web Tables. XP Objectives Explore the structure of a Web table Create headings and cells in a table Create cells that span multiple](https://reader036.vdocuments.net/reader036/viewer/2022062516/56649e2a5503460f94b17d49/html5/thumbnails/5.jpg)
XPXPXPXPXPIntroducing Web Tables• Table headings, the cells
that identify the contents of a row or column, are marked using a <th> tag
• Data cells are marked with the <td> tag and are used for any content that is not considered a heading
New Perspectives on HTML and XHTML, Comprehensive 5
![Page 6: Tutorial 5 Working with Web Tables. XP Objectives Explore the structure of a Web table Create headings and cells in a table Create cells that span multiple](https://reader036.vdocuments.net/reader036/viewer/2022062516/56649e2a5503460f94b17d49/html5/thumbnails/6.jpg)
XPXPXPXPXPIntroducing Web Tables
New Perspectives on HTML and XHTML, Comprehensive 6
![Page 7: Tutorial 5 Working with Web Tables. XP Objectives Explore the structure of a Web table Create headings and cells in a table Create cells that span multiple](https://reader036.vdocuments.net/reader036/viewer/2022062516/56649e2a5503460f94b17d49/html5/thumbnails/7.jpg)
XPXPXPXPXPIntroducing Web Tables• To add a border to a Web table using HTML, use
the border attribute<table border="value"> ... </table>where value is the size of the border in pixels
New Perspectives on HTML and XHTML, Comprehensive 7
![Page 8: Tutorial 5 Working with Web Tables. XP Objectives Explore the structure of a Web table Create headings and cells in a table Create cells that span multiple](https://reader036.vdocuments.net/reader036/viewer/2022062516/56649e2a5503460f94b17d49/html5/thumbnails/8.jpg)
XPXPXPXPXPSpanning Rows and Columns• A spanning cell is a single cell that occupies more than one
row or one column in the table• To create a table cell that spans several columns, add the
attributecolspan="value"to the cell, where value is the number of columns covered by the cell
• To create a table cell that spans several rows, add the attributerowspan="value"to the cell, where value is the number of rows covered by the cell
New Perspectives on HTML and XHTML, Comprehensive 8
![Page 9: Tutorial 5 Working with Web Tables. XP Objectives Explore the structure of a Web table Create headings and cells in a table Create cells that span multiple](https://reader036.vdocuments.net/reader036/viewer/2022062516/56649e2a5503460f94b17d49/html5/thumbnails/9.jpg)
XPXPXPXPXPCreating a Table Caption• To create a table caption, add the caption
element directly below the opening <table> tag with the syntax<caption>content</caption>where content is the content of the table caption
New Perspectives on HTML and XHTML, Comprehensive 9
![Page 10: Tutorial 5 Working with Web Tables. XP Objectives Explore the structure of a Web table Create headings and cells in a table Create cells that span multiple](https://reader036.vdocuments.net/reader036/viewer/2022062516/56649e2a5503460f94b17d49/html5/thumbnails/10.jpg)
XPXPXPXPXPMarking Row Groups• You can divide a table’s rows into row groups, in
which each group element contains different types of content and can be formatted differently
• A table can have multiple table body row groups
New Perspectives on HTML and XHTML, Comprehensive 10
![Page 11: Tutorial 5 Working with Web Tables. XP Objectives Explore the structure of a Web table Create headings and cells in a table Create cells that span multiple](https://reader036.vdocuments.net/reader036/viewer/2022062516/56649e2a5503460f94b17d49/html5/thumbnails/11.jpg)
XPXPXPXPXPMarking Column Groups• Once the table columns have been determined
by the browser, you can reference them through the use of column groups
New Perspectives on HTML and XHTML, Comprehensive 11
![Page 12: Tutorial 5 Working with Web Tables. XP Objectives Explore the structure of a Web table Create headings and cells in a table Create cells that span multiple](https://reader036.vdocuments.net/reader036/viewer/2022062516/56649e2a5503460f94b17d49/html5/thumbnails/12.jpg)
XPXPXPXPXPAdding a Table Summary• The summary attribute allows you to include a
more detailed description about the table<table summary="description"> ... </table>
New Perspectives on HTML and XHTML, Comprehensive 12
![Page 13: Tutorial 5 Working with Web Tables. XP Objectives Explore the structure of a Web table Create headings and cells in a table Create cells that span multiple](https://reader036.vdocuments.net/reader036/viewer/2022062516/56649e2a5503460f94b17d49/html5/thumbnails/13.jpg)
XPXPXPXPXPFormatting Tables with HTML Attributes• The amount of space between table cells is
known as the cell spacing• The cell padding is the space between the cell
contents and the cell border
New Perspectives on HTML and XHTML, Comprehensive 13
![Page 14: Tutorial 5 Working with Web Tables. XP Objectives Explore the structure of a Web table Create headings and cells in a table Create cells that span multiple](https://reader036.vdocuments.net/reader036/viewer/2022062516/56649e2a5503460f94b17d49/html5/thumbnails/14.jpg)
XPXPXPXPXPFormatting Tables with HTML Attributes• To define the padding within table cells, add the
attribute<table cellpadding="value"> ... </table>to the table element, where value is the size of the padding space in pixels
• To define the space between table cells, add the attribute<table cellspacing="value"> ... </table>to the table element, where value is the space between table cells in pixels
New Perspectives on HTML and XHTML, Comprehensive 14
![Page 15: Tutorial 5 Working with Web Tables. XP Objectives Explore the structure of a Web table Create headings and cells in a table Create cells that span multiple](https://reader036.vdocuments.net/reader036/viewer/2022062516/56649e2a5503460f94b17d49/html5/thumbnails/15.jpg)
XPXPXPXPXPFormatting Tables with HTML Attributes• To set the width of the table to a specific value,
add the width attribute<table width="value"> ... </table>
• Many browsers also support the height attribute<table height="value"> ... </table>
• You can use HTML to set the row heights by applying the height attribute<tr height="value"> ... </tr>
New Perspectives on HTML and XHTML, Comprehensive 15
![Page 16: Tutorial 5 Working with Web Tables. XP Objectives Explore the structure of a Web table Create headings and cells in a table Create cells that span multiple](https://reader036.vdocuments.net/reader036/viewer/2022062516/56649e2a5503460f94b17d49/html5/thumbnails/16.jpg)
XPXPXPXPXPFormatting Tables with HTML Attributes• A table frame specifies which sides of the table
(or which sides of the table cells) will have borders<table border="value" frame="type"> ... </table>
New Perspectives on HTML and XHTML, Comprehensive 16
![Page 17: Tutorial 5 Working with Web Tables. XP Objectives Explore the structure of a Web table Create headings and cells in a table Create cells that span multiple](https://reader036.vdocuments.net/reader036/viewer/2022062516/56649e2a5503460f94b17d49/html5/thumbnails/17.jpg)
XPXPXPXPXPFormatting Tables with HTML Attributes
New Perspectives on HTML and XHTML, Comprehensive 17
![Page 18: Tutorial 5 Working with Web Tables. XP Objectives Explore the structure of a Web table Create headings and cells in a table Create cells that span multiple](https://reader036.vdocuments.net/reader036/viewer/2022062516/56649e2a5503460f94b17d49/html5/thumbnails/18.jpg)
XPXPXPXPXPFormatting Tables with HTML Attributes• A table rule specifies how the internal gridlines
are drawn within the table<table border="value" rules="type"> ... </table>
New Perspectives on HTML and XHTML, Comprehensive 18
![Page 19: Tutorial 5 Working with Web Tables. XP Objectives Explore the structure of a Web table Create headings and cells in a table Create cells that span multiple](https://reader036.vdocuments.net/reader036/viewer/2022062516/56649e2a5503460f94b17d49/html5/thumbnails/19.jpg)
XPXPXPXPXPFormatting Tables with HTML Attributes• By default, browsers horizontally center the
contents of table header cells and left-align the contents of table data cells– To control the horizontal alignment
align="position“– To control the vertical alignment
valign="position"
New Perspectives on HTML and XHTML, Comprehensive 19
![Page 20: Tutorial 5 Working with Web Tables. XP Objectives Explore the structure of a Web table Create headings and cells in a table Create cells that span multiple](https://reader036.vdocuments.net/reader036/viewer/2022062516/56649e2a5503460f94b17d49/html5/thumbnails/20.jpg)
XPXPXPXPXPFormatting Tables with CSS• Starting with CSS2, Cascading Style Sheets
included support for Web tables• You can apply one set of borders to the Web
table itself and another set of borders to the individual cells within the table
New Perspectives on HTML and XHTML, Comprehensive 20
![Page 21: Tutorial 5 Working with Web Tables. XP Objectives Explore the structure of a Web table Create headings and cells in a table Create cells that span multiple](https://reader036.vdocuments.net/reader036/viewer/2022062516/56649e2a5503460f94b17d49/html5/thumbnails/21.jpg)
XPXPXPXPXPFormatting Tables with CSS• To define the border model used by the table, apply the
table styleborder-collapse: typewhere type is separate (the default) to keep all borders around cells and the table itself, separate, or collapse to merge all adjacent borders
• To set the space between separated borders, apply the table styleborder-spacing: valuewhere value is the space between the borders in any of the CSS units of measure
New Perspectives on HTML and XHTML, Comprehensive 21
![Page 22: Tutorial 5 Working with Web Tables. XP Objectives Explore the structure of a Web table Create headings and cells in a table Create cells that span multiple](https://reader036.vdocuments.net/reader036/viewer/2022062516/56649e2a5503460f94b17d49/html5/thumbnails/22.jpg)
XPXPXPXPXPFormatting Tables with CSS• The most general styles are those applied to the
entire table
New Perspectives on HTML and XHTML, Comprehensive 22
![Page 23: Tutorial 5 Working with Web Tables. XP Objectives Explore the structure of a Web table Create headings and cells in a table Create cells that span multiple](https://reader036.vdocuments.net/reader036/viewer/2022062516/56649e2a5503460f94b17d49/html5/thumbnails/23.jpg)
XPXPXPXPXPFormatting Tables with CSS• To position a table caption, apply the style
caption-side: positionwhere position is top or bottom
New Perspectives on HTML and XHTML, Comprehensive 23
![Page 24: Tutorial 5 Working with Web Tables. XP Objectives Explore the structure of a Web table Create headings and cells in a table Create cells that span multiple](https://reader036.vdocuments.net/reader036/viewer/2022062516/56649e2a5503460f94b17d49/html5/thumbnails/24.jpg)
XPXPXPXPXPApplying Table Styles to Other Page Elements
New Perspectives on HTML and XHTML, Comprehensive 24
![Page 25: Tutorial 5 Working with Web Tables. XP Objectives Explore the structure of a Web table Create headings and cells in a table Create cells that span multiple](https://reader036.vdocuments.net/reader036/viewer/2022062516/56649e2a5503460f94b17d49/html5/thumbnails/25.jpg)
XPXPXPXPXPApplying Table Styles to Other Page Elements
New Perspectives on HTML and XHTML, Comprehensive 25
![Page 26: Tutorial 5 Working with Web Tables. XP Objectives Explore the structure of a Web table Create headings and cells in a table Create cells that span multiple](https://reader036.vdocuments.net/reader036/viewer/2022062516/56649e2a5503460f94b17d49/html5/thumbnails/26.jpg)
XPXPXPXPXPUsing Tables for Page Layout
New Perspectives on HTML and XHTML, Comprehensive 26
![Page 27: Tutorial 5 Working with Web Tables. XP Objectives Explore the structure of a Web table Create headings and cells in a table Create cells that span multiple](https://reader036.vdocuments.net/reader036/viewer/2022062516/56649e2a5503460f94b17d49/html5/thumbnails/27.jpg)
XPXPXPXPXPUsing Tables for Page Layout• The jigsaw layout involves breaking up the page
content into separate table cells that are then joined together like pieces in a jigsaw puzzle
New Perspectives on HTML and XHTML, Comprehensive 27
![Page 28: Tutorial 5 Working with Web Tables. XP Objectives Explore the structure of a Web table Create headings and cells in a table Create cells that span multiple](https://reader036.vdocuments.net/reader036/viewer/2022062516/56649e2a5503460f94b17d49/html5/thumbnails/28.jpg)
XPXPXPXPXPUsing Tables for Page Layout
New Perspectives on HTML and XHTML, Comprehensive 28
![Page 29: Tutorial 5 Working with Web Tables. XP Objectives Explore the structure of a Web table Create headings and cells in a table Create cells that span multiple](https://reader036.vdocuments.net/reader036/viewer/2022062516/56649e2a5503460f94b17d49/html5/thumbnails/29.jpg)
XPXPXPXPXPExploring the Controversy over Table Layouts• Table layouts are not in the spirit of HTML• Table layouts are difficult to revise• Tables take longer to render• Tables can be code-heavy• Tables can be inaccessible to users with
disabilities
New Perspectives on HTML and XHTML, Comprehensive 29
![Page 30: Tutorial 5 Working with Web Tables. XP Objectives Explore the structure of a Web table Create headings and cells in a table Create cells that span multiple](https://reader036.vdocuments.net/reader036/viewer/2022062516/56649e2a5503460f94b17d49/html5/thumbnails/30.jpg)
XPXPXPXPXPCreating a Rounded Box Using div Containers
New Perspectives on HTML and XHTML, Comprehensive 30
![Page 31: Tutorial 5 Working with Web Tables. XP Objectives Explore the structure of a Web table Create headings and cells in a table Create cells that span multiple](https://reader036.vdocuments.net/reader036/viewer/2022062516/56649e2a5503460f94b17d49/html5/thumbnails/31.jpg)
XPXPXPXPXPCreating a Rounded Box Using div Containers<div class="top"><div class="bottom"><div class="left"><div class="right"><div class="topLeft"><div class="topRight"><div class="bottomLeft"><div class="bottomRight">
<div class="boxContent">content</div>
</div></div></div></div></div></div></div></div>
New Perspectives on HTML and XHTML, Comprehensive 31
![Page 32: Tutorial 5 Working with Web Tables. XP Objectives Explore the structure of a Web table Create headings and cells in a table Create cells that span multiple](https://reader036.vdocuments.net/reader036/viewer/2022062516/56649e2a5503460f94b17d49/html5/thumbnails/32.jpg)
XPXPXPXPXPCreating a Rounded Box Using div Containers
New Perspectives on HTML and XHTML, Comprehensive 32