Survey
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
Working with Tables: Module A: Table Basics CSCI N241: Fundamentals of Web Design Copyright ©2004 Department of Computer & Information Science Goals • To understand how to create basic tables • To understand how to use <th> and <caption> elements • To understand how to format tables N241: Fundamentals of Web Development Copyright ©2004 Department of Computer & Information Science 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 N241: Fundamentals of Web Development Copyright ©2004 Department of Computer & Information Science Creating Basic Tables N241: Fundamentals of Web Development Copyright ©2004 Department of Computer & Information Science Creating Basic Tables • 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 N241: Fundamentals of Web Development Copyright ©2004 Department of Computer & Information Science 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 N241: Fundamentals of Web Development Copyright ©2004 Department of Computer & Information Science 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 N241: Fundamentals of Web Development Copyright ©2004 Department of Computer & Information Science Table Elements N241: Fundamentals of Web Development Copyright ©2004 Department of Computer & Information Science 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 N241: Fundamentals of Web Development Copyright ©2004 Department of Computer & Information Science 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 N241: Fundamentals of Web Development Copyright ©2004 Department of Computer & Information Science Schedule Table N241: Fundamentals of Web Development Copyright ©2004 Department of Computer & Information Science 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 N241: Fundamentals of Web Development Copyright ©2004 Department of Computer & Information Science 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 N241: Fundamentals of Web Development Copyright ©2004 Department of Computer & Information Science 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 N241: Fundamentals of Web Development Copyright ©2004 Department of Computer & Information Science Captions and Summaries • 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 N241: Fundamentals of Web Development Copyright ©2004 Department of Computer & Information Science 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 N241: Fundamentals of Web Development Copyright ©2004 Department of Computer & Information Science Captions and Summaries • 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 N241: Fundamentals of Web Development Copyright ©2004 Department of Computer & Information Science 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 N241: Fundamentals of Web Development Copyright ©2004 Department of Computer & Information Science Table Widths N241: Fundamentals of Web Development Copyright ©2004 Department of Computer & Information Science 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 N241: Fundamentals of Web Development Copyright ©2004 Department of Computer & Information Science Horizontal Alignment N241: Fundamentals of Web Development Copyright ©2004 Department of Computer & Information Science 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 N241: Fundamentals of Web Development Copyright ©2004 Department of Computer & Information Science Structuring 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 N241: Fundamentals of Web Development Copyright ©2004 Department of Computer & Information Science 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 N241: Fundamentals of Web Development Copyright ©2004 Department of Computer & Information Science 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 N241: Fundamentals of Web Development Copyright ©2004 Department of Computer & Information Science 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 N241: Fundamentals of Web Development Copyright ©2004 Department of Computer & Information Science Table Body • You can also include multiple <tbody> elements to control different parts of the table body N241: Fundamentals of Web Development Copyright ©2004 Department of Computer & Information Science 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 N241: Fundamentals of Web Development Copyright ©2004 Department of Computer & Information Science Table Footers • 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 N241: Fundamentals of Web Development Copyright ©2004 Department of Computer & Information Science 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 N241: Fundamentals of Web Development Copyright ©2004 Department of Computer & Information Science 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 N241: Fundamentals of Web Development Copyright ©2004 Department of Computer & Information Science Column Groups • 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 N241: Fundamentals of Web Development Copyright ©2004 Department of Computer & Information Science 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 N241: Fundamentals of Web Development Copyright ©2004 Department of Computer & Information Science Column Widths • However, you can adjust the widths of columns using the width attribute of the <colgroup> or <col> elements N241: Fundamentals of Web Development Copyright ©2004 Department of Computer & Information Science 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 N241: Fundamentals of Web Development Copyright ©2004 Department of Computer & Information Science Using Tables to Simulate Frames • 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 N241: Fundamentals of Web Development Copyright ©2004 Department of Computer & Information Science 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 N241: Fundamentals of Web Development Copyright ©2004 Department of Computer & Information Science Using Tables to Simulate Frames • 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 N241: Fundamentals of Web Development Copyright ©2004 Department of Computer & Information Science 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 N241: Fundamentals of Web Development Copyright ©2004 Department of Computer & Information Science 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 N241: Fundamentals of Web Development Copyright ©2004 Department of Computer & Information Science Borders N241: Fundamentals of Web Development Copyright ©2004 Department of Computer & Information Science The frame Attribute • You can include the frame attribute in the <table> element to specify which sides of the table should display a border N241: Fundamentals of Web Development Copyright ©2004 Department of Computer & Information Science The frame Attribute N241: Fundamentals of Web Development Copyright ©2004 Department of Computer & Information Science Rules • You can include the rules attribute in the <table> element to specify which rules should appear in a table N241: Fundamentals of Web Development Copyright ©2004 Department of Computer & Information Science Rules N241: Fundamentals of Web Development Copyright ©2004 Department of Computer & Information Science 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 N241: Fundamentals of Web Development Copyright ©2004 Department of Computer & Information Science Displaying Empty Cells N241: Fundamentals of Web Development Copyright ©2004 Department of Computer & Information Science 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 N241: Fundamentals of Web Development Copyright ©2004 Department of Computer & Information Science Cell Margins • In comparison, the cellpadding attribute specifies the amount of horizontal and vertical space between each cell’s border and the contents of the cell N241: Fundamentals of Web Development Copyright ©2004 Department of Computer & Information Science Cell Margins N241: Fundamentals of Web Development Copyright ©2004 Department of Computer & Information Science 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 N241: Fundamentals of Web Development Copyright ©2004 Department of Computer & Information Science Cells that Span Multiple Rows or Columns N241: Fundamentals of Web Development Copyright ©2004 Department of Computer & Information Science 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 (default value), bottom, and baseline N241: Fundamentals of Web Development Copyright ©2004 Department of Computer & Information Science Resources • Slides were adapted from the following text & companion lectures: XHTML, Comprehensive First Edition Dan Gosselin Published by Course Technology (2004) N241: Fundamentals of Web Development Copyright ©2004 Department of Computer & Information Science Questions? N241: Fundamentals of Web Development Copyright ©2004 Department of Computer & Information Science