XHTML1 Tables N100 Creating a Simple Web Page

XHTML2 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

XHTML3 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

XHTML4 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

XHTML5 Basic Elements You create tables using the element Within the 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 element also includes several attributes that affect the appearance and structure of a table

XHTML6 Table Elements

XHTML7 The Element Cells are the most basic parts of a table You create a cell within the element using the element The element stands for “table data” The content of each element is the data that will appear in the table cell

XHTML8 The Element Each element essentially represents a column in the table You declare table cells within table row elements that you create with the element Each element you include within a element creates a separate row

XHTML9 Schedule Table

XHTML10 Table Widths You use the width attribute of the 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

XHTML11 Table Widths

XHTML12 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

XHTML13 Column Widths You cannot use the 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 and elements However, you can adjust the widths of columns using the width attribute of the or elements

XHTML14 Borders You use the 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

XHTML15 Borders

XHTML16 The frame Attribute You can include the frame attribute in the element to specify which sides of the table should display a border

XHTML17 Rules You can include the rules attribute in the element to specify which rules should appear in a table

XHTML18 Displaying Empty Cells Web browsers do not render the borders around empty cells To fix this problem, you need to add a element for each empty cell, and include a non-breaking space character entity ( ) as each cell’s content

XHTML19 Displaying Empty Cells

XHTML20 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

XHTML21 Cell Margins

XHTML22 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 or 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

XHTML23 Cells that Span Multiple Rows or Columns

XHTML24 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 and elements The values you can assign to the valign attribute are top, middle, bottom, and baseline The default valign attribute is “middle”