Presentation is loading. Please wait.

Presentation is loading. Please wait.

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.

Similar presentations


Presentation on theme: "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."— Presentation transcript:

1 XHTML1 Tables N100 Creating a Simple Web Page

2 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

3 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

4 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

5 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

6 XHTML6 Table Elements

7 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

8 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

9 XHTML9 Schedule Table

10 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

11 XHTML11 Table Widths

12 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

13 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

14 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

15 XHTML15 Borders

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

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

18 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

19 XHTML19 Displaying Empty Cells

20 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

21 XHTML21 Cell Margins

22 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

23 XHTML23 Cells that Span Multiple Rows or Columns

24 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”


Download ppt "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."

Similar presentations


Ads by Google