INTRODUCTORY Tutorial 8 Creating Data Tables

XP Objectives 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 CSS2

XP Objectives Create styles for the table element Format columns of data Stripe table rows Position a text block New Perspectives on Blended HTML, XHTML, and CSS3

XP Creating 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 CSS4

XP Creating a Table to Display and Organize Data To create a table, enter the following code: where 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 is the end table tag. New Perspectives on Blended HTML, XHTML, and CSS5

XP Creating 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: captiontext where is the start caption tag, captiontext is the text in the caption, and is the end caption tag. New Perspectives on Blended HTML, XHTML, and CSS6

XP Creating 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: tabledata where is the start table row tag, is the start table data tag, tabledata is the data for the cell, is the end table data tag, and is the end table row tag. New Perspectives on Blended HTML, XHTML, and CSS7

XP Creating 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 CSS8

XP Creating a Table to Display and Organize Data New Perspectives on Blended HTML, XHTML, and CSS9

XP Creating 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 CSS10

XP Creating 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 CSS11

XP Creating a Table to Display and Organize Data New Perspectives on Blended HTML, XHTML, and CSS12

XP Creating 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: 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 CSS13

XP Creating a Table to Display and Organize Data New Perspectives on Blended HTML, XHTML, and CSS14

XP Creating 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 CSS15

XP Using 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 CSS16

XP Using CSS to Format Tables New Perspectives on Blended HTML, XHTML, and CSS17

XP Using 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 tag, apply the stripe class to each alternate row in the table New Perspectives on Blended HTML, XHTML, and CSS18

XP Using CSS to Format Tables New Perspectives on Blended HTML, XHTML, and CSS19

XP Using 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: where col is the column element. Enter a element for each column in the table. If the 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 CSS20

XP Using CSS to Format Tables New Perspectives on Blended HTML, XHTML, and CSS21