1 / 24

Tables

Learn how to create simple and organized tables in XHTML for displaying data and laying out web pages. Understand the structure and attributes of table elements, as well as how to adjust table widths, add borders, and align table contents.

roache
Download Presentation

Tables

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Tables N100 Creating a Simple Web Page XHTML

  2. 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 XHTML

  3. 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 XHTML

  4. 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 XHTML

  5. 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 XHTML

  6. Table Elements XHTML

  7. 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 XHTML

  8. 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 XHTML

  9. Schedule Table XHTML

  10. 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 XHTML

  11. Table Widths XHTML

  12. 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 XHTML

  13. 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 XHTML

  14. 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 XHTML

  15. Borders XHTML

  16. The frame Attribute • You can include the frame attribute in the <table> element to specify which sides of the table should display a border XHTML

  17. Rules • You can include the rules attribute in the <table> element to specify which rules should appear in a table XHTML

  18. 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 (&nbsp;) as each cell’s content XHTML

  19. Displaying Empty Cells XHTML

  20. 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 XHTML

  21. Cell Margins XHTML

  22. 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 XHTML

  23. Cells that Span Multiple Rows or Columns XHTML

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

More Related