elements within a

element

Unordered Lists

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

• elements within an

  element

  Ordered Lists

  Definition Lists

   A

  definition list

  definitions is a series of terms and their   Web browsers render each term and its definition on separate lines with an indented left margin You create a definition list by using the

  element, you nest

  elements for term names and

  elements for term definitions

  Definition Lists

  Working with Tables & Lists

  TABLE BASICS

  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

  Creating Basic Tables

  Creating Basic Tables

    Tables are also used to lay out Web pages, much like frames are used The W3C discourages using tables for document layout because tables can be difficult for non-visual user agents to interpret

  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

  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

  Table Elements

  The

  Element     Cells are the most basic parts of a table You create a cell within the element using the element Each element The element stands for “table data” The content of each element is the data that will appear in the table cell 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 you include within a element creates a separate row Schedule Table The Element   Table cells can contain two types of information: data that you define with the element and heading information that you define with the element. User agents render the content of a element in a distinct manner; most Web browsers display heading information in a bold typeface and align it in the center of the column 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 element The element must be the first element following the element, and you can include only a single element per table A caption should provide a short phrase or title that clearly describes the contents of the table Captions and Summaries    The element is important because it allows non-visual user agents to understand the purpose of a table For short or simple tables, the purpose of the table. element is usually sufficient for describing the For long or complex tables, however, you should also include the summary attribute of the element, which allows you to provide a more detailed summary of a table’s structure and content for use in non visual user agents Table Widths  You use the width the the size of a table attribute of element to specify  You can assign a fixed value in pixels or a percentage representing the visible width of a Web browser window Table Widths 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 and element ; to define the table body, you use the element; and to define the table footer, you use the element Table Body    The rows of data that make up the body of a table element should contain the You can use the element to align a table body and to apply CSS formatting to the table body You can also include multiple table body elements to control different parts of the Table Footers   The element defines information that should be placed at the bottom of a table You use the element to provide additional information about the columns or about the table itself Table Footers  The element must be placed before the 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 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 Column Groups   You use the element to create a column group in a table You must place a after a table’s element Column Groups   The element can be created either as an empty element or as a tag pair that contains elements as its content The empty element allows you to apply formatting to an individual column in a column group 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 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 elements The values you can assign to the align attribute are left, center, right, and justify Horizontal Alignment 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 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 element element and before its element  Similarly, if you want to create two vertical frames, you create a table with a single row containing two elements 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 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 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 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 Borders The frame Attribute  You can include the frame in the a border attribute element to specify which sides of the table should display Rules  You can include the attribute rules in the element to specify which rules should appear in a table 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 Displaying Empty Cells Cell Margins    The cellspacing between table cells attribute specifies the amount of horizontal and vertical space You assign to the cellspacing value representing the number of pixels that you want between table cells attribute a In comparison, the cellpadding attribute specifies the amount of horizontal and vertical space between each cell’s border and the contents of the cell Cell Margins 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 on the next screen, it shows a breakdown of the animal kingdom into phylum and class Cells that Span Multiple Rows or Columns 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 (default value) , bottom , and baseline Questions? Directory ×