Upload
dexter-writer
View
222
Download
3
Embed Size (px)
Citation preview
XPXPObjectives• Contrast data tables with layout tables• Create a table to display and organize data• Provide a table caption• Merge table columns or rows
New Perspectives on Blended HTML, XHTML, and CSS 2
XPXPObjectives• Create styles for the table element• Format columns of data• Stripe table rows• Position a text block
New Perspectives on Blended HTML, XHTML, and CSS 3
XPXPCreating a Table to Display and Organize Data• A data table is a table used to align Web content
in columns and rows–A cell is the intersection of a column and row
• A layout table is a table in which the code is used for page layout
• Frames present documents in multiple views as either independent windows or subwindows– Legacy code
New Perspectives on Blended HTML, XHTML, and CSS 4
XPXPCreating a Table to Display and Organize Data• To create a table, enter the following code:
<table title="tabletitle">
</table>
where <table> is the start table tag, title is the title attribute,
tabletitle is a brief description of the table to be used as a ScreenTip, and </table> is the end table tag.
New Perspectives on Blended HTML, XHTML, and CSS 5
XPXPCreating a Table to Display and Organize Data• A caption is a brief description of a table• To create a table caption, enter the following
code:<caption>captiontext</
caption>
where <caption> is the start caption tag, captiontext is the text in the caption, and
</caption> is the end caption tag.
New Perspectives on Blended HTML, XHTML, and CSS 6
XPXPCreating a Table to Display and Organize Data• The table row element is used to create table
rows• To create table rows, enter the following code:<tr>
<td>tabledata</td>
</tr>
where <tr> is the start table row tag, <td> is the start table data tag, tabledata is the data for the cell, </td> is the end table data tag, and </tr> is the end table row tag.
New Perspectives on Blended HTML, XHTML, and CSS 7
XPXPCreating a Table to Display and Organize Data• The table data element is used for entering cell
content• The table header element formats the first row
of a table• The scope attribute determines which adjacent
cells are associated with a particular cell
New Perspectives on Blended HTML, XHTML, and CSS 8
XPXPCreating a Table to Display and Organize Data
New Perspectives on Blended HTML, XHTML, and CSS 9
XPXPCreating a Table to Display and Organize Data• Table borders are the horizontal and vertical lines that
surround the table• Gridlines are the horizontal and vertical lines that
appear within the table• To create external borders, enter the following CSS
code:table {
border: value;
}
where table is the table element, border is the border property, and value is any CSS unit measurement
New Perspectives on Blended HTML, XHTML, and CSS 10
XPXPCreating a Table to Display and Organize Data• To create gridlines, enter the following CSS code:th, td {
border: value;
}
where th, td are the table header and table data selectors, border is the border property, and value is any CSS unit measurement.
New Perspectives on Blended HTML, XHTML, and CSS 11
XPXPCreating a Table to Display and Organize Data
New Perspectives on Blended HTML, XHTML, and CSS 12
XPXPCreating a Table to Display and Organize Data• The colspan attribute is used to merge cells across
columns• The rowspan attribute is used to merge cells across rows• To span a cell across columns, enter the following code:<td colspan="value">
where colspan is the colspan attribute and value is the number of columns that will be spanned. The colspan attribute and its value must be placed in the cell in which the column merge should begin. All empty spanned table data cells should be deleted.
New Perspectives on Blended HTML, XHTML, and CSS 13
XPXPCreating a Table to Display and Organize Data
New Perspectives on Blended HTML, XHTML, and CSS 14
XPXPCreating a Table to Display and Organize Data• The border-collapse property is used to change
the appearance of the table gridlines
New Perspectives on Blended HTML, XHTML, and CSS 15
XPXPUsing CSS to Format Tables• To set the table width, enter the following CSS
styles code:table {
width: value;
}
where table is the table element selector, width is the width property, and value is a value for the table width expressed in any of the CSS units of measurement.
New Perspectives on Blended HTML, XHTML, and CSS 16
XPXPUsing CSS to Format Tables• Row striping alternates the background color of the
rows in a table• To create row striping, enter the following code:
tr.stripe {
styles
}
where tr is the table row element, stripe is a dependent class name, and styles are the styles to change the appearance of an alternate row of the table
• Within the start <tr> tag, apply the stripe class to each alternate row in the table
New Perspectives on Blended HTML, XHTML, and CSS 18
XPXPUsing CSS to Format Tables• The column element is used to format one or more
columns• To format table columns, enter the following code
below the table caption code:<col />
where col is the column element. Enter a <col /> element for each column in the table. If the <col/> element will format more than one column, enter span="n", where span is the span attribute and n is the number of columns to be spanned. Delete the col element for each column to be spanned.
New Perspectives on Blended HTML, XHTML, and CSS 20