XP 1 Tutorial 4 Designing a Web Page with Tables

XP 2 Objectives  Create a text table  Create a table using the,, and tags  Create table headers and captions  Control the appearance of a table and table text  Create table cells that span several rows or columns  Use nested tables to enhance page design

Text Tables: Column Alignment Problems with Proportional Fonts Columns look aligned Columns lose alignment Proportional fonts assign a different amount of space for each character depending on the width of that character

Text Tables: Column Alignment with Fixed-Width Fonts Fixed-width or mono-space fonts use the same amount of space for each character. Use a fixed width font to ensure that the columns in your text tables remain in alignment. Columns align regardless of font size

XP 5 Using the Tag  The tag creates preformatted text and retains any spaces or line breaks indicated in the HTML file.  The tag displays text using a fixed- width font.  By using the tag, the columns will retain their alignment no matter what font the browser is using.

Text Table Created with the Tag text will appear in the browser as it appears here

XP 7 A Graphical Table  can include background colors and colored borders with shading  can control the size of tables cells, rows, columns and alignment of text within the table

XP 8 Using the,, and Tags  Graphical tables are enclosed within a two- sided tag that identifies the start and ending of the table structure.  Each row of the table is indicated using a two-sided (for table row).  Within each table row, a two-sided (for table data) tag indicates the presence of individual table cells.

XP 9 HTML Structure of a Table beginning of the table structure first row of six in the table end of the table structure table cells

XP 10 Creating Headings with  HTML provides the tag for table headings.  Text formatted with the tag is centered within the cell and displayed in a boldface font.  The tag is most often used for column headings, but you can use it for any cell that you want to contain centered boldfaced text.

XP 11 Identifying the Table Heading, Body, and Footer  HTML allows you to identify the different parts of your table using the,, and tags. is used for the table heading is used for the table body is used for the table footer  These tags do not format the table, but they do contain collections of rows called row groups.

XP 12 The Table Heading, Body, and Footer Syntax heading information... footer information... first group of table rows... second group of table rows... thead must be listed before tfoot Both thead & tfoot must appear before tbody

XP 13 Creating a Table Caption  A caption is used to provide descriptive information. The syntax is: caption text  Race Results  The tag must appear directly after the opening tag.

XP 14 Modifying the Appearance of a Table  You can modify the appearance of a table by adding: gridlines borders background color  HTML also provides tags and attributes to control the placement and size of a table.

XP 15 Adding a Table Border  By default, browsers display tables without table borders.  The syntax for creating a table border is: value is the width of the border in pixels  Unless you set the border size to 0 pixels, the size of the internal gridlines is not affected by the border attribute.

Tables with different borders sizes <table border="5" bordercolor="brown“ bordercolorlight="tan“> <caption style="font-weight: bold; text-align: left"> Race Results

XP 17 Table Frames  The frames attribute determines which sides of the table will have borders.  type is “box” (default), “above”, “below”, “hsides”, “vsides”, “lhs”, “rhs”, “void”

XP 18 Creating Table Rules  The rules attribute controls how the table gridlines are drawn.  type is “all”, “rows”, “cols”, “none”, “groups”

XP 19 Controlling Cell Spacing  The cellspacing attribute controls the amount of space inserted between table cells.  value is the width of the interior borders the default cell spacing is 2 pixels

XP 20 Setting Cell Padding  To control the space between the table text and the cell borders, add the cellpadding attribute; refers to the space within the cells.  value is the distance from the table text to the cell border the default cell padding value is 1 pixel

XP 21 Setting the Cell Spacing to 0 and Cell Padding to 4 Pixels <table border="5" bordercolor="brown" bordercolorlight="tan" cellspacing="0" cellpadding="4“ > Race Results

XP 22 Setting the Table Width  value is the width of the table in pixels or as a percentage of the display area  If you specify an absolute size for a table in pixels, its size remains constant, regardless of a user’s monitor’s size. 

XP 23 Setting Cell and Column Width  To set the width of an individual cell, add the width attribute to either the or tags.  The syntax is: width=“value” value can be expressed either in pixels or as a percentage of the table width a width value of 30% displays a cell that is 30% of the total width of the table

XP 24 Spanning Rows and Columns  A spanning cell is a cell that occupies more than one row or column in a table.  Spanning cells are created by inserting the rowspan and colspan attribute in a or tag.  The syntax for these attributes is: rowspan=“value” colspan=“value” value is the number of rows or columns that the cell spans in the table

XP 25 Example of Spanning Cells this cell spans three columns This cell spans two columns and two rows This cell spans three rows

XP 26 A Table Structure with a Row-Spanning Cell HTML code resulting table four table cells in the first row only three table cells are required for the second and third rows

XP 27 Adding Spanning Cells to a Table Runner Time Origin Men 1. Peter Teagan 2:12:34 San Antonio, Texas 2. Kyle Wills 2:13:05 Billings, Montana 3. Jason Wu 2:14:28 Cutler, Colorado Women 1. Laura Blake 2:28:21 Park City, Colorado 2. Kathy Lasker 2:30:11 Chicago, Illinois 3. Lisa Peterson 2:31:14 Seattle, Washington

XP 28 Results of a Table with Spanning Cells

XP 29 Formatting Table Contents  By using the align and valign attributes, you can specify the text’s horizontal and vertical placement.

XP 30 Formatting Table Text  Apply the same text and font styles to table text.  The style cascade down through the table structure.  - - -

Setting the background colors in the table Women Men Color styles cascade down thru the table structure

XP 32 Setting the background image to a table  A background-image style can be applied to the entire table, to a row group, a row, or an individual cell using the style below background-image: url(url)

XP 33 Aligning a Table on a Web Page  By default, a browser places a table on the left margin of a Web page, with surrounding text placed above and below the table.  To float the table, use the style below: float: position where position is none (default), left, or right 

XP 34 Working with Column Groups  To define a column group, add the following: columns value is the number of columns in the group, and columns are definitions for individual columns within the group 

XP 35 Using Tables for Layout 1.Specify different backgrounds for the page and the table. 2.Columnar layout 3.Sectional layout  Fixed-width and Fluid Layouts  Challenges of Table Layouts

Table layout of the Gazette home page 4) address 1) newspaper logo 2) list of links 3) articles 90% of page width content flows into the rest of the page 120 pixels <td colspan=“2” align=“center”> <td width=“120” rowspan=“2” valign=“top”> <td valign=“top” align=“center”>

Table layout for the article section Marathon story Highway 6 story Links to stories & features 60%40%