xhtml1 tables and lists. xhtml2 objectives in this chapter, you will: create basic tables structure...
Post on 20-Dec-2015
243 views
TRANSCRIPT
![Page 1: XHTML1 Tables and Lists. XHTML2 Objectives In this chapter, you will: Create basic tables Structure tables Format tables Create lists](https://reader035.vdocuments.mx/reader035/viewer/2022062320/56649d425503460f94a1dc41/html5/thumbnails/1.jpg)
XHTML 1
Tables and Lists
![Page 2: XHTML1 Tables and Lists. XHTML2 Objectives In this chapter, you will: Create basic tables Structure tables Format tables Create lists](https://reader035.vdocuments.mx/reader035/viewer/2022062320/56649d425503460f94a1dc41/html5/thumbnails/2.jpg)
XHTML 2
Objectives
In this chapter, you will:
• Create basic tables
• Structure tables
• Format tables
• Create lists
![Page 3: XHTML1 Tables and Lists. XHTML2 Objectives In this chapter, you will: Create basic tables Structure tables Format tables Create lists](https://reader035.vdocuments.mx/reader035/viewer/2022062320/56649d425503460f94a1dc41/html5/thumbnails/3.jpg)
XHTML 3
Creating Basic Tables
• Tables are collections of rows and columns that you use to organize and display data
• In a table, the intersection of any given row and column is called a cell
![Page 4: XHTML1 Tables and Lists. XHTML2 Objectives In this chapter, you will: Create basic tables Structure tables Format tables Create lists](https://reader035.vdocuments.mx/reader035/viewer/2022062320/56649d425503460f94a1dc41/html5/thumbnails/4.jpg)
XHTML 4
Creating Basic Tables
![Page 5: XHTML1 Tables and Lists. XHTML2 Objectives In this chapter, you will: Create basic tables Structure tables Format tables Create lists](https://reader035.vdocuments.mx/reader035/viewer/2022062320/56649d425503460f94a1dc41/html5/thumbnails/5.jpg)
XHTML 5
• Tables are also used to lay out Web pages, much like frames have been used
• The W3C discourages using tables for document layout because tables can be difficult for non-visual user agents to interpret
Creating Basic Tables
![Page 6: XHTML1 Tables and Lists. XHTML2 Objectives In this chapter, you will: Create basic tables Structure tables Format tables Create lists](https://reader035.vdocuments.mx/reader035/viewer/2022062320/56649d425503460f94a1dc41/html5/thumbnails/6.jpg)
XHTML 6
Creating Basic Tables
• Additionally, user agents with small monitors, such as Personal Digital Assistants (PDAs), and browsers that use large fonts may have difficulty rendering a Web page that is laid out using tables
• The W3C encourages the use of Cascading Style Sheets (CSS) for document layout
![Page 7: XHTML1 Tables and Lists. XHTML2 Objectives In this chapter, you will: Create basic tables Structure tables Format tables Create lists](https://reader035.vdocuments.mx/reader035/viewer/2022062320/56649d425503460f94a1dc41/html5/thumbnails/7.jpg)
XHTML 7
Basic <table> Elements
• You create tables using the <table> element
• Within the <table> element you can nest a number of other elements that specify the content of each cell along with the structure and appearance of the table
• The <table> element also includes several attributes that affect the appearance and structure of a table
![Page 8: XHTML1 Tables and Lists. XHTML2 Objectives In this chapter, you will: Create basic tables Structure tables Format tables Create lists](https://reader035.vdocuments.mx/reader035/viewer/2022062320/56649d425503460f94a1dc41/html5/thumbnails/8.jpg)
XHTML 8
Table Elements
![Page 9: XHTML1 Tables and Lists. XHTML2 Objectives In this chapter, you will: Create basic tables Structure tables Format tables Create lists](https://reader035.vdocuments.mx/reader035/viewer/2022062320/56649d425503460f94a1dc41/html5/thumbnails/9.jpg)
XHTML 9
The <td> Element
• Cells are the most basic parts of a table
• You create a cell within the <table> element using the <td> element
• The <td> element stands for “table data”
• The content of each <td> element is the data that will appear in the table cell
![Page 10: XHTML1 Tables and Lists. XHTML2 Objectives In this chapter, you will: Create basic tables Structure tables Format tables Create lists](https://reader035.vdocuments.mx/reader035/viewer/2022062320/56649d425503460f94a1dc41/html5/thumbnails/10.jpg)
XHTML 10
The <td> Element
• Each <td> element essentially represents a column in the table
• You declare table cells within table row elements that you create with the <tr> element
• Each <tr> element you include within a <table> element creates a separate row
![Page 11: XHTML1 Tables and Lists. XHTML2 Objectives In this chapter, you will: Create basic tables Structure tables Format tables Create lists](https://reader035.vdocuments.mx/reader035/viewer/2022062320/56649d425503460f94a1dc41/html5/thumbnails/11.jpg)
XHTML 11
Schedule Table
![Page 12: XHTML1 Tables and Lists. XHTML2 Objectives In this chapter, you will: Create basic tables Structure tables Format tables Create lists](https://reader035.vdocuments.mx/reader035/viewer/2022062320/56649d425503460f94a1dc41/html5/thumbnails/12.jpg)
XHTML 12
The <th> Element
• Table cells can contain two types of information: data that you define with the <td> element and heading information that you define with the <th> element
• User agents render the content of a <th> element in a distinct manner; most Web browsers display heading information in a bold typeface and align it in the center of the column
![Page 13: XHTML1 Tables and Lists. XHTML2 Objectives In this chapter, you will: Create basic tables Structure tables Format tables Create lists](https://reader035.vdocuments.mx/reader035/viewer/2022062320/56649d425503460f94a1dc41/html5/thumbnails/13.jpg)
XHTML 13
Captions and Summaries
• Most tables include a caption that describes the data in the table
• You create a caption for a Web page table using the <caption> element
• The <caption> element must be the first element following the <table> element, and you can include only a single <caption> element per table
• A caption should provide a short phrase or title that clearly describes the contents of the table
![Page 14: XHTML1 Tables and Lists. XHTML2 Objectives In this chapter, you will: Create basic tables Structure tables Format tables Create lists](https://reader035.vdocuments.mx/reader035/viewer/2022062320/56649d425503460f94a1dc41/html5/thumbnails/14.jpg)
XHTML 14
Captions and Summaries
• The <caption> element is important because it allows non-visual user agents to understand the purpose of a table
• For short or simple tables, the <caption> element is usually sufficient for describing the purpose of the table
• For long or complex tables, however, you should also include the summary attribute of the <table> element, which allows you to provide a more detailed summary of a table’s structure and content for use in non-visual user agents
![Page 15: XHTML1 Tables and Lists. XHTML2 Objectives In this chapter, you will: Create basic tables Structure tables Format tables Create lists](https://reader035.vdocuments.mx/reader035/viewer/2022062320/56649d425503460f94a1dc41/html5/thumbnails/15.jpg)
XHTML 15
Table Widths
• You use the width attribute of the <table> element to specify the size of a table
• You can assign a fixed value in pixels or a percentage representing the visible width of a Web browser window
![Page 16: XHTML1 Tables and Lists. XHTML2 Objectives In this chapter, you will: Create basic tables Structure tables Format tables Create lists](https://reader035.vdocuments.mx/reader035/viewer/2022062320/56649d425503460f94a1dc41/html5/thumbnails/16.jpg)
XHTML 16
Table Widths
![Page 17: XHTML1 Tables and Lists. XHTML2 Objectives In this chapter, you will: Create basic tables Structure tables Format tables Create lists](https://reader035.vdocuments.mx/reader035/viewer/2022062320/56649d425503460f94a1dc41/html5/thumbnails/17.jpg)
XHTML 17
Horizontal Alignment
• You can use the align attribute to adjust the horizontal alignment of the contents of all table elements with the exception of the <table> and <caption> elements
• The values you can assign to the align attribute are left, center, right, and justify
![Page 18: XHTML1 Tables and Lists. XHTML2 Objectives In this chapter, you will: Create basic tables Structure tables Format tables Create lists](https://reader035.vdocuments.mx/reader035/viewer/2022062320/56649d425503460f94a1dc41/html5/thumbnails/18.jpg)
XHTML 18
Horizontal Alignment
![Page 19: XHTML1 Tables and Lists. XHTML2 Objectives In this chapter, you will: Create basic tables Structure tables Format tables Create lists](https://reader035.vdocuments.mx/reader035/viewer/2022062320/56649d425503460f94a1dc41/html5/thumbnails/19.jpg)
XHTML 19
Structuring Tables
• Although table structure elements are not required in order for your documents to be well formed, it is a good idea to include them to clearly identify the different parts of your tables
• Table structure elements also allow you to apply default alignment and CSS styles to entire sections of a table and to adjust the width of individual columns
![Page 20: XHTML1 Tables and Lists. XHTML2 Objectives In this chapter, you will: Create basic tables Structure tables Format tables Create lists](https://reader035.vdocuments.mx/reader035/viewer/2022062320/56649d425503460f94a1dc41/html5/thumbnails/20.jpg)
XHTML 20
Row Groups
• You can create table row group elements that consist of a table header, table body, and table footer
• To define a table header, you use the <thead> element; to define the table body, you use the <tbody> element; and to define the table footer, you use the <tfoot> element
![Page 21: XHTML1 Tables and Lists. XHTML2 Objectives In this chapter, you will: Create basic tables Structure tables Format tables Create lists](https://reader035.vdocuments.mx/reader035/viewer/2022062320/56649d425503460f94a1dc41/html5/thumbnails/21.jpg)
XHTML 21
Table Header
• You must place the <thead> element after any <caption>, <colgroup>, and <col> elements and before the <tbody> and <tfoot> elements
• Typically, you place table heading information (created with the <th> element) within the <thead> element, as shown on page 229 of the textbook
![Page 22: XHTML1 Tables and Lists. XHTML2 Objectives In this chapter, you will: Create basic tables Structure tables Format tables Create lists](https://reader035.vdocuments.mx/reader035/viewer/2022062320/56649d425503460f94a1dc41/html5/thumbnails/22.jpg)
XHTML 22
Table Body
• The <tbody> element should contain the rows of data that make up the body of a table
• You can use the <tbody> element to align a table body and to apply CSS formatting to the table body
• You can also include multiple <tbody> elements to control different parts of the table body
![Page 23: XHTML1 Tables and Lists. XHTML2 Objectives In this chapter, you will: Create basic tables Structure tables Format tables Create lists](https://reader035.vdocuments.mx/reader035/viewer/2022062320/56649d425503460f94a1dc41/html5/thumbnails/23.jpg)
XHTML 23
Table Footers
• The <tfoot> element defines information that should be placed at the bottom of a table
• You use the <tfoot> element to provide additional information about the columns or about the table itself
• The <tfoot> element must be placed before the <tbody> element in order to allow a user agent to render the structure of the table before it receives the potentially large amount of data that may appear in the table body
![Page 24: XHTML1 Tables and Lists. XHTML2 Objectives In this chapter, you will: Create basic tables Structure tables Format tables Create lists](https://reader035.vdocuments.mx/reader035/viewer/2022062320/56649d425503460f94a1dc41/html5/thumbnails/24.jpg)
XHTML 24
Columns
• There are times when you may want to format the columns in your tables, either individually or as a group
• In this section you study column groups, which are used for applying default alignment, width, and CSS styles to groups of columns within a table
![Page 25: XHTML1 Tables and Lists. XHTML2 Objectives In this chapter, you will: Create basic tables Structure tables Format tables Create lists](https://reader035.vdocuments.mx/reader035/viewer/2022062320/56649d425503460f94a1dc41/html5/thumbnails/25.jpg)
XHTML 25
Column Groups
• You use the <colgroup> element to create a column group in a table
• You must place a <colgroup> element after a table’s <caption> element and before its <thead> element
• The <colgroup> element can be created either as an empty element or as a tag pair that contains <col> elements as its content
• The empty <col> element allows you to apply formatting to an individual column in a column group
![Page 26: XHTML1 Tables and Lists. XHTML2 Objectives In this chapter, you will: Create basic tables Structure tables Format tables Create lists](https://reader035.vdocuments.mx/reader035/viewer/2022062320/56649d425503460f94a1dc41/html5/thumbnails/26.jpg)
XHTML 26
Column Widths
• You cannot use the <table> element’s width attribute to adjust the size of cells or columns in a table, which are determined automatically by each user agent
• In addition, you cannot adjust the widths of individual table cells with the <td> and <th> elements
• However, you can adjust the widths of columns using the width attribute of the <colgroup> or <col> elements
![Page 27: XHTML1 Tables and Lists. XHTML2 Objectives In this chapter, you will: Create basic tables Structure tables Format tables Create lists](https://reader035.vdocuments.mx/reader035/viewer/2022062320/56649d425503460f94a1dc41/html5/thumbnails/27.jpg)
XHTML 27
Using Tables to Simulate Frames
• If you want to use tables to simulate frames, you create a table with the same number of cells as the number of frames you want
• If you want to create two horizontal frames (one at the top of a page and one on bottom), you create a table with two rows, with each row containing a single <td> element
• Similarly, if you want to create two vertical frames, you create a table with a single row containing two <td> elements
![Page 28: XHTML1 Tables and Lists. XHTML2 Objectives In this chapter, you will: Create basic tables Structure tables Format tables Create lists](https://reader035.vdocuments.mx/reader035/viewer/2022062320/56649d425503460f94a1dc41/html5/thumbnails/28.jpg)
XHTML 28
Using Tables to Simulate Frames
• To create a navigation menu on the left and a content pane on the right, you would place a list of hyperlinks in the left cell and display each link’s associated content in the right cell
• One of the big differences between frames and tables that simulate frames is that when you click a link in a table, the link opens an entirely new page in the same browser window—it does not display a new URL in a different area of the same page as occurs with frames
![Page 29: XHTML1 Tables and Lists. XHTML2 Objectives In this chapter, you will: Create basic tables Structure tables Format tables Create lists](https://reader035.vdocuments.mx/reader035/viewer/2022062320/56649d425503460f94a1dc41/html5/thumbnails/29.jpg)
XHTML 29
Formatting Tables
• You should handle the visual display of
content with CSS
• Nevertheless, you can use several types of
built-in table formatting options without CSS,
even when using the Strict DTD
![Page 30: XHTML1 Tables and Lists. XHTML2 Objectives In this chapter, you will: Create basic tables Structure tables Format tables Create lists](https://reader035.vdocuments.mx/reader035/viewer/2022062320/56649d425503460f94a1dc41/html5/thumbnails/30.jpg)
XHTML 30
Borders
• You use the <table> element’s border attribute to add a border to a table
• The value you assign to the border attribute determines the thickness of the border in pixels
![Page 31: XHTML1 Tables and Lists. XHTML2 Objectives In this chapter, you will: Create basic tables Structure tables Format tables Create lists](https://reader035.vdocuments.mx/reader035/viewer/2022062320/56649d425503460f94a1dc41/html5/thumbnails/31.jpg)
XHTML 31
Borders
![Page 32: XHTML1 Tables and Lists. XHTML2 Objectives In this chapter, you will: Create basic tables Structure tables Format tables Create lists](https://reader035.vdocuments.mx/reader035/viewer/2022062320/56649d425503460f94a1dc41/html5/thumbnails/32.jpg)
XHTML 32
The frame Attribute• You can include the frame attribute in the <table> element to
specify which sides of the table should display a border
![Page 33: XHTML1 Tables and Lists. XHTML2 Objectives In this chapter, you will: Create basic tables Structure tables Format tables Create lists](https://reader035.vdocuments.mx/reader035/viewer/2022062320/56649d425503460f94a1dc41/html5/thumbnails/33.jpg)
XHTML 33
Rules
• You can include the rules attribute in the <table> element to specify which rules should appear in a table
![Page 34: XHTML1 Tables and Lists. XHTML2 Objectives In this chapter, you will: Create basic tables Structure tables Format tables Create lists](https://reader035.vdocuments.mx/reader035/viewer/2022062320/56649d425503460f94a1dc41/html5/thumbnails/34.jpg)
XHTML 34
Displaying Empty Cells
• Web browsers do not render the borders around empty cells
• To fix this problem, you need to add a <td> element for each empty cell, and include a non-breaking space character entity ( ) as each cell’s content
![Page 35: XHTML1 Tables and Lists. XHTML2 Objectives In this chapter, you will: Create basic tables Structure tables Format tables Create lists](https://reader035.vdocuments.mx/reader035/viewer/2022062320/56649d425503460f94a1dc41/html5/thumbnails/35.jpg)
XHTML 35
Displaying Empty Cells
![Page 36: XHTML1 Tables and Lists. XHTML2 Objectives In this chapter, you will: Create basic tables Structure tables Format tables Create lists](https://reader035.vdocuments.mx/reader035/viewer/2022062320/56649d425503460f94a1dc41/html5/thumbnails/36.jpg)
XHTML 36
Cell Margins
• The cellspacing attribute specifies the amount of horizontal and vertical space between table cells
• You assign to the cellspacing attribute a value representing the number of pixels that you want between table cells
• In comparison, the cellpadding attribute specifies the amount of horizontal and vertical space between each cell’s border and the contents of the cell
![Page 37: XHTML1 Tables and Lists. XHTML2 Objectives In this chapter, you will: Create basic tables Structure tables Format tables Create lists](https://reader035.vdocuments.mx/reader035/viewer/2022062320/56649d425503460f94a1dc41/html5/thumbnails/37.jpg)
XHTML 37
Cell Margins
![Page 38: XHTML1 Tables and Lists. XHTML2 Objectives In this chapter, you will: Create basic tables Structure tables Format tables Create lists](https://reader035.vdocuments.mx/reader035/viewer/2022062320/56649d425503460f94a1dc41/html5/thumbnails/38.jpg)
XHTML 38
Cells that Span Multiple Rows or Columns
• You can cause cells to span multiple rows or columns by including the rowspan or colspan attributes in the <td> or <th> elements
• As an example of the colspan attribute, the table in Figure 6-32 shows a breakdown of the animal kingdom into phylum and class
![Page 39: XHTML1 Tables and Lists. XHTML2 Objectives In this chapter, you will: Create basic tables Structure tables Format tables Create lists](https://reader035.vdocuments.mx/reader035/viewer/2022062320/56649d425503460f94a1dc41/html5/thumbnails/39.jpg)
XHTML 39
Cells that Span Multiple Rows or Columns
![Page 40: XHTML1 Tables and Lists. XHTML2 Objectives In this chapter, you will: Create basic tables Structure tables Format tables Create lists](https://reader035.vdocuments.mx/reader035/viewer/2022062320/56649d425503460f94a1dc41/html5/thumbnails/40.jpg)
XHTML 40
Vertical Alignment
• You can use the valign attribute, which adjusts the vertical alignment of the contents of all table elements with the exception of the <table> and <caption> elements
• The values you can assign to the valign attribute are top, middle, bottom, and baseline
• The default valign attribute is “middle”
![Page 41: XHTML1 Tables and Lists. XHTML2 Objectives In this chapter, you will: Create basic tables Structure tables Format tables Create lists](https://reader035.vdocuments.mx/reader035/viewer/2022062320/56649d425503460f94a1dc41/html5/thumbnails/41.jpg)
XHTML 41
Creating Lists
• Lists are a very important tool in proper Web page authoring because they provide a way of logically ordering a series of words or numbers
• They also provide a simple, yet effective design technique for making it easier for Web site visitors to locate information
• You can add three types of lists to a Web page; unordered lists, ordered lists, and definition lists
![Page 42: XHTML1 Tables and Lists. XHTML2 Objectives In this chapter, you will: Create basic tables Structure tables Format tables Create lists](https://reader035.vdocuments.mx/reader035/viewer/2022062320/56649d425503460f94a1dc41/html5/thumbnails/42.jpg)
XHTML 42
Creating Lists
![Page 43: XHTML1 Tables and Lists. XHTML2 Objectives In this chapter, you will: Create basic tables Structure tables Format tables Create lists](https://reader035.vdocuments.mx/reader035/viewer/2022062320/56649d425503460f94a1dc41/html5/thumbnails/43.jpg)
XHTML 43
Unordered Lists
• An unordered list is a series of bulleted items
• To define the items you want to appear in the bulleted list, you nest <li> elements within a <ul> element
![Page 44: XHTML1 Tables and Lists. XHTML2 Objectives In this chapter, you will: Create basic tables Structure tables Format tables Create lists](https://reader035.vdocuments.mx/reader035/viewer/2022062320/56649d425503460f94a1dc41/html5/thumbnails/44.jpg)
XHTML 44
Unordered Lists
![Page 45: XHTML1 Tables and Lists. XHTML2 Objectives In this chapter, you will: Create basic tables Structure tables Format tables Create lists](https://reader035.vdocuments.mx/reader035/viewer/2022062320/56649d425503460f94a1dc41/html5/thumbnails/45.jpg)
XHTML 45
Ordered Lists
• An ordered list is a series of numbered items
• To define the items you want to appear in the numbered list, you nest <li> elements within an <ol> element
![Page 46: XHTML1 Tables and Lists. XHTML2 Objectives In this chapter, you will: Create basic tables Structure tables Format tables Create lists](https://reader035.vdocuments.mx/reader035/viewer/2022062320/56649d425503460f94a1dc41/html5/thumbnails/46.jpg)
XHTML 46
Ordered Lists
![Page 47: XHTML1 Tables and Lists. XHTML2 Objectives In this chapter, you will: Create basic tables Structure tables Format tables Create lists](https://reader035.vdocuments.mx/reader035/viewer/2022062320/56649d425503460f94a1dc41/html5/thumbnails/47.jpg)
XHTML 47
Definition Lists
• A definition list is a series of terms and their definitions
• Web browsers render each term and its definition on separate lines with an indented left margin
• You create a definition list by using the <dl> element, you nest <dt> elements for term names and <dd> elements for term definitions
![Page 48: XHTML1 Tables and Lists. XHTML2 Objectives In this chapter, you will: Create basic tables Structure tables Format tables Create lists](https://reader035.vdocuments.mx/reader035/viewer/2022062320/56649d425503460f94a1dc41/html5/thumbnails/48.jpg)
XHTML 48
Definition Lists
![Page 49: XHTML1 Tables and Lists. XHTML2 Objectives In this chapter, you will: Create basic tables Structure tables Format tables Create lists](https://reader035.vdocuments.mx/reader035/viewer/2022062320/56649d425503460f94a1dc41/html5/thumbnails/49.jpg)
XHTML 49
Summary
• Tables are collections of rows and columns that you use to organize and display data
• In a table, the intersection of any given row and column is called a cell
• You create tables using the <table> element
• You create a cell within the <table> element using the <td> element
• You create a caption for a Web page table using the <caption> element
![Page 50: XHTML1 Tables and Lists. XHTML2 Objectives In this chapter, you will: Create basic tables Structure tables Format tables Create lists](https://reader035.vdocuments.mx/reader035/viewer/2022062320/56649d425503460f94a1dc41/html5/thumbnails/50.jpg)
XHTML 50
Summary
• You use the width attribute of the <table> element to specify the size of a table
• You can create row groups in a table that consist of a table header, table body, and table foot
• Column groups are used for applying default alignment, width, and Cascading Style Sheets (CSS) styles to groups of columns within a table
• You can adjust the widths of columns using the width attribute of the <colgroup> or <col> elements
![Page 51: XHTML1 Tables and Lists. XHTML2 Objectives In this chapter, you will: Create basic tables Structure tables Format tables Create lists](https://reader035.vdocuments.mx/reader035/viewer/2022062320/56649d425503460f94a1dc41/html5/thumbnails/51.jpg)
XHTML 51
Summary
• You include the frame attribute in the <table> element to specify which sides of the table should display a border
• You can use a <td> element to create an empty cell, but you must include the non-breaking space character entity ( ) as each empty cell’s content
• You can cause cells to span multiple rows or columns by including the rowspan or colspan attribute in the <td> or <th> elements
![Page 52: XHTML1 Tables and Lists. XHTML2 Objectives In this chapter, you will: Create basic tables Structure tables Format tables Create lists](https://reader035.vdocuments.mx/reader035/viewer/2022062320/56649d425503460f94a1dc41/html5/thumbnails/52.jpg)
XHTML 52
Summary
• The valign attribute adjusts the vertical alignment of the contents of all table elements with the exception of the <table> and <caption> elements
• An unordered list is a series of bulleted items
• An ordered list is a series of numbered items
• A definition list is a series of terms and their definitions