Designing a Web Page with Tables

Please download to get full document.

View again

of 101
All materials on our website are shared by users. If you have any questions about copyright issues, please report us to resolve them. We are always happy to assist you.
Information Report
Category:

Documents

Published:

Views: 2 | Pages: 101

Extension: PPT | Download: 0

Share
Related documents
Description
... browsers display tables without borders Can add one with the BORDER property where value is the width of the border in pixels See ...
Tags
Transcript
Title: Designing a Web Page with Tables 1 Designing a Web Page with Tables
  • Maureen Smith
  • Professor, Saddleback College
  • Tutorial 4
  • 2 Lesson Plan
  • Review
  • Tutorial 4 - Designing a Web Page with Tables
  • Session 4.1
  • Session 4.2
  • Session 4.3
  • Review
  • 3 Objectives Objectives!
  • Work with preformatted text to create a basic text table
  • Create the basic structure of a graphical table
  • Organize table rows into row groups
  • Add a caption to a table
  • Describe how to add summary info
  • 4
  • Create table borders and gridlines
  • Specify the width and height for different table elements
  • Format contents of table cells
  • Apply background image and color
  • Align a table and cell contents
  • 5
  • Describe the different types of page layouts that you can achieve with tables
  • Work with both fixed-width and fluid layouts
  • Create a newspaper-style layout using tables
  • 6 Session 4.1
  • You will design a Web site for a weekly edition of a newspaper
  • Should have same look and feel as the printed oneclassic, traditional
  • In order to implement this design, you will learn how to create and format tables
  • 7 Tables on the World Wide Web
  • Your first assignment is to place a marathon story
  • With it, a table that lists the top three male and female finishers
  • See Figure 4-1
  • There are two ways to insert a table of information on a Web page
  • 8
  • You can create a text table or a graphical table
  • A text table contains only text, evenly spaced out in rows and columns
  • Text tables use only standard typewriter characters so that even a line in a text table is created by repeating a typographical character, such as a hyphen, underline or equal sign
  • See Figure 4-2
  • 9
  • A graphical table appears as a graphical element
  • Allows you to include design elements such as color, shading, and borders
  • You have greater control over the appearance
  • Can control the size of individual table cells and text alignment
  • Can even create cells that span several rows or columns
  • 10
  • Graphical tables are more flexible and attractive than text tables
  • But there are some situations when you need to use a text table
  • Text-only browsers can display only text
  • Working with the tags for graphical tables can be complicated and time-consuming
  • 11
  • So you may want to create two versions of your page
  • 12 Creating a text table
  • The beginning of the file youll use has already been created
  • The page consists of an article about the marathon
  • Youll add the race results table between the first and second paragraphs
  • See tutorial3/race1.htm
  • 13 Using fixed-width fonts
  • To create a text table, you have to control the type of font that is used
  • Relies on spaces and the characters that fill those spaces to create its column boundaries
  • Have to use a font that allots the same amount of space to each character and to the empty spaces between characters
  • This type of font is called a fixed-width font, or a monospace font
  • 14 OR Courier Times New Roman
  • Most typeset documents (your book) use proportional fonts
  • The width of each character varies according to the characters shape
  • Character m is wider than l
  • Proportional fonts are more visually attractive so you might be tempted to use them
  • 15
  • But if you do, the varying width of the characters and spaces between characters might cause errors when the page is rendered
  • See Figure 4-5 to see how a proportional font loses alignment when the font size is increased or decreased
  • See Figure 4-6, with fixed-width fonts, to see that the columns remain aligned regardless of font size
  • 16
  • Different browsers and operating systems may use different font sizes to display text, so should always use a fixed-width font to ensure that the columns remain aligned
  • 17 Using preformatted text
  • Recall that HTML ignores extra blank spaces, lines, or tabs
  • However, to control the appearance of a table, will need to use spaces and other characters
  • Can insert the ltpregt tag to display preformatted text--text formatted in ways that you want retained
  • Any text formatted with this tag retains those extra blank spaces and lines
  • 18
  • It also displays text using a fixed-width font, which is what you want for the text table
  • When you use this tag, you insert blank spaces by pressing the spacebar to align the columns of text in the table
  • See tutorial4/race2.htm
  • By using the ltpregt tag, youve created a text table that every browser can display
  • 19
  • Youve also ensured that the columns will retain their alignment no matter what font the browser is using
  • Now create the graphical table
  • 20 Defining a table structure
  • Complicated because you have to enter a lot of information to define the layout and appearance
  • First step is to specify the table structure
  • Number of rows and columns
  • Location of column headings
  • Placement of a table caption
  • Then can start entering text and data into the cells of the table
  • 21
  • The beginning of the page for the graphical table has already been created
  • See tutorial4/race3.htm
  • 22 Marking a table, table row, and table cell
  • To create a graphical table, start with the two-sided lttablegt tag
  • Identifies where table structure begins
  • Indicates where the table ends
  • Then you identify the number of rows by inserting a two-sided lttrgt tag at the beginning of each table row, starting with the top row and moving down
  • 23
  • The end of each table row is indicated by a lt/trgt tag
  • Finally, within the lttrgt tags you must indicate the location of each table cell with a two-sidedlttdgt tag (table data)
  • HTML does not provide a means of specifying the number and placement of table columns
  • 24
  • Columns are determined by how many cells are inserted in each row
  • If you have four ltTDgt tags in each table row, you have four columns
  • lttablegt
  • lttrgt
  • lttdgt First Cell lt/tdgt
  • lttdgt Second Cell lt/tdgt
  • lt/trgt
  • lt/tablegt
  • 25
  • This example has two columns
  • You are going to create seven rows and four columns
  • First row will contain column headings
  • Remaining six will display the tables data
  • See tutorial4/race4.htm
  • Add the text for each cell
  • See tutorial4/race5.htm
  • 26 Creating table headings
  • XHTML provides a special tag for cells that will act as table headings (column headings)
  • The two-sidedltthgt tag is used for cells within the table just like the lttdgt tag
  • Difference is that that text formatted with the ltthgt tag is centered within the cell and displayed in bold
  • Table can have several rows of table headings
  • 27
  • In fact, because the ltthgt tag is a replacement for the lttdgt tag, can use it for any cell containing text you want displayed in centered bold type
  • You have a single row of table headings
  • See tutorial4/race6.htm
  • 28 Creating row groups
  • Can classify a tables rows into row groups that indicate their purpose in the table
  • Three types table header, table body, table footer
  • Because order is important, table header must be listed before footer, and both must appear before the body
  • To mark header rows
  • 29
  • lttheadgt
  • table rows
  • lt/theadgt
  • Can contain only one set of header rows
  • To mark header footer
  • lttfootgt
  • table rows
  • lt/tfootgt
  • 30
  • Only one footer per table
  • To mark rows of table body
  • lttbodygt
  • table rows
  • lt/tbodygt
  • Can have multiple body sections
  • Row groups are used for tables that draw data from external sources
  • 31
  • Databases, XML docs
  • Programs can be written in which contents of a table body span across several pages, with contents of header/footer repeated on each page
  • Not all browsers support this
  • Creating groups does not affect appearance
  • But can apply styles to groups to make them appear differently
  • 32
  • Lets mark the tables header and body
  • No footer
  • See tutorial4/race7.htm
  • 33 Creating a table caption
  • Captions are used to provide descriptive info about the table
  • Use the ltcaptiongt tag
  • ltcaptiongtcontentlt/captiongt
  • Where content indicates is the content of the caption
  • MUST appear directly after opening lttablegt tag
  • 34
  • By default, is centered above the table
  • Can change that using align attribute
  • ltcaption alignpositiongtcontentlt/captiongt
  • where position is bottom or top, centered
  • Left or right, aligned with margin
  • Older browsers recognize only top and bottom
  • 35
  • Lets add Race Results to the table in bold
  • See tutorial4/race8.htm
  • 36 Adding a table summary
  • For non-visual browsers, useful to include a summary of a tables contents
  • lttable summarydescriptiongt lt/tablegt
  • where description is a description of the tables purpose and contents
  • Does not affect appearance in visual browsers
  • Now we format the table!
  • 37 Session 4.2
  • Working with the table border
  • Lack of gridlines and borders makes the table difficult to read
  • Lets add borders, gridlines, and background color
  • And control placement, size, and table border
  • 38 Adding a table border
  • By default, browsers display tables without borders
  • Can add one with the BORDER property
  • lttable bordervaluegt
  • where value is the width of the border in pixels
  • See Figure 4-18 for different sizes
  • Note that the size of the internal gridlines is not affected by the border attribute
  • 39
  • Lets add a 5-pixel border
  • See tutorial4/race9.htm
  • By default, table borders are displayed in two shades of gray for a three-dimensional look
  • Can change that with
  • lttable bordercolorcolorgt
  • 40
  • where color is an HTML color name or hexadecimal value
  • This attribute has been deprecated, but is still widely supported (not by Opera)
  • See Figure 4-21
  • To work around discrepancy between IE and Netscape, can use bordercolorlight and bordercolordark
  • See Figure 4-22
  • 41
  • Lets change the color of the table border
  • See tutorial4/race10.htm
  • Depending on browser, your colors may not match what is shown
  • 42 Creating frames and rules
  • By default a table border surrounds entire table and each of the cells
  • To change this, use frame and rules attributes
  • Frame attribute determines which sides will have borders
  • lttable frametypegt
  • where type is box (default), above, border, below, hsides, vsides, lhs, rhs, void
  • 43
  • See Figure 4-25 for frames values
  • See Figure 4-26 for effects of these values on a table grid
  • Rules attribute controls how gridlines are drawn
  • lttable rulestypegt
  • where type is all (default), cols, groups, or none
  • See Figure 4-27 for rules values
  • 44
  • See Figure 4-28 for effect of these values
  • Both attributes might not be supported in older browsers
  • We will not make any changes to frame or rules values
  • 45 Sizing a table
  • Table still looks crowded
  • Maybe smaller internal borders, more space between text and borders, slightly wider
  • Tables are sized automatically by browser, but there are several attributes that can override size choices made by the browser
  • Thank goodness! 46 Setting cell spacing
  • Cell spacing controls amount of space between table cells
  • Default is 2 pixels to change
  • lttable cellspacingvaluegt
  • where value is size in pixels
  • See Figure 4-29 for different cell spacing
  • Changing this value also impacts size of interior borders
  • 47
  • Lets change the gridlines to be as small as possible by decreasing the cell spacing to 0 pixels
  • Because interior border includes a drop shadow, even setting cell spacing to 0 will not remove the gridlines
  • See tutorial4/race11.htm
  • 48 Setting cell padding
  • Distance between cell text and cell border is known as cell padding
  • Default is 1 pixel, which may be too little
  • lttable cellpaddingvaluegt
  • where value is size in pixels
  • See Figure 4-32 for different cell padding
  • Lets increase cell padding to 4 pixels
  • See tutorial4/race12.htm
  • 49 Setting the table width
  • Table would look better larger
  • Overall size is determined by its content
  • lttable widthvaluegt
  • where value is width in pixels or percentage of width of the containing element
  • 100 of page element has table fill entire page
  • With an absolute size, table remains constant, regardless of users monitor size
  • 50
  • Percentage allows table to match each monitors dimensions
  • If table requires a certain width to display contents, will ignore a width value smaller
  • Many browsers, but not XHTML, support
  • lttable heightvaluegt
  • where value is height in pixels or percentage of height of element
  • 51
  • Lets set the width of the table to 70 of the page width
  • See tutorial4/race13.htm
  • 52 Setting cell and column width
  • Width value can also be applied to individual cells
  • lttd widthvaluegt or ltth widthvaluegt
  • where value is width in pixels or percentage of width of entire table
  • Can set width of first cell in column and remaining cells will adopt that width
  • 53
  • However, if browser expands to fit content of one cell, all cells in column will match
  • If you set different widths for two cells in same column, browser applies larger value
  • Can also set height of a cell
  • lttd heightvaluegt or ltth heightvaluegt
  • Deprecated attribute
  • 54 Preventing line wrap
  • If you change widths, might want to make sure contents of certain cells dont wrap
  • Like name or date
  • To prevent line wrapping
  • lttd nowrapnowrapgt or ltth nowrapnowrapgt
  • We will not modify width or height
  • 55 Spanning rows and columns
  • Repeating the group info for each row is redundant
  • Lets merge several cells into one
  • See Figure 4-37
  • We create a spanning cella cell that occupies more than one row or column
  • See Figure 4-38
  • 56
  • Spanning cells are created by inserting rowspan and/or colspan attributes
  • lttd (or th) rowspanvalue colspanvaluegt
  • where value is number of rows or columns the cell spans
  • Direction of the spanning is downward and to the right
  • 57
  • MUST remember to adjust the number of cell tags used
  • See Figure 4-39
  • Lets delete the table heading for Group column and span Runner heading across 2 columns and delete second/third occurrences of Men and Women and span those cells
  • See tutorial4/race14.htm
  • Woe is you if you don't! 58 Formatting table contents
  • How bout aligning group names to tops of their cells and race times right-aligned?
  • Sans-serif font
  • Colored background
  • Table aligned with right margin
  • Article text flowing around
  • 59 Aligning the contents of a cell
  • By default, text is placed in middle of cell, aligned with left edge to change
  • alignposition
  • where position is either left (default for td), center (default for th), right, justify, or char
  • Char tells browser to align based on position of a particular character like a decimal point
  • Default character is decimal, but can be changed
  • 60
  • lttd alignchar char,gt
  • Not well supported
  • For a different vertical alignment of cell content, use
  • valignposition
  • where position is top, middle (default), bottom, or baseline
  • See Figure 4-42
  • 61
  • Lets right-align each time value and align group names with tops of their cells
  • See tutorial4/race15.htm
  • 62 Formatting table text
  • Can apply same text and font styles for table text
  • Styles cascade down through table structure, from table element, through row groups and table rows, down to individual cells
  • To change font style of all text in a table, apply a style to the table element
  • To change font style of table body, apply to tbody element
  • 63
  • Lets display all text in a sans-serif font
  • Font size for table to 1em, but with the body text at 80 of that size
  • See tutorial4/race16.htm
  • Older browsers may need a ltfontgt tag instead of a style tag
  • Are we done yet? 64 Setting the background color
  • Table elements support same background-color style as page
  • Color styles cascade down through the table structur
  • We Need Your Support
    Thank you for visiting our website and your interest in our free products and services. We are nonprofit website to share and download documents. To the running of this website, we need your help to support us.

    Thanks to everyone for your continued support.

    No, Thanks