网页制作中的表格与布局(英文版).pptVIP

Chapter 5 Tables and page layout Objectives Tell the difference between data tables and layout tables. Create HTML tables using table, tr, td, th, caption. Use the attributes properly: rowspan, colspan, align, valign, cellspacing, cellpadding, width, height. Use table layout and CSS layout properly. Table uses HTML tables fall into 2 broad categories: data tables and layout tables. Data tables, the arrangement of information in rows and columns, are the intended use of HTML table elements. Tables may be used to present calendars, schedules, statistics, etc. Layout tables are used purely as a presentational device for controlling the layout of a page. While we are still in a period of transition from table-based design to totally CSS-based design, some authors still choose to use tables to establish the basic column structure of the page. Basic table structure Web tables are made up of cells (which is where the content goes), arranged into rows. The minimum elements for defining a table are table, for establishing the table itself, tr, for declaring a table row, and td for creating table cells within the row. For example… Spanning rows and columns Data cells in a table can occupy more than one space in the grid created by the rows and columns. By specifying td colspan=“2”, we can make the cell span over 2 columns. For example, … By specifying td rowspan=“2”, we can make the cell span over 2 rows. For example, … Descriptive elements Table header cells (indicated by the th element) are used to provide important information or context about the cells in the row or column that they precede. The caption element provides a title or brief description of the table. The caption element must immediately follow the opening table tag. caption align=“top|bottom|left|right” table caption/caption Table cell spacing Cell spacing refers to the amount of space that is held between the cells in a table. It is specified with the cellspacing attribute in the table element. Cell