网页制作中的表格与布局英文版优质PPT.ppt

1、Chapter 5 Tables and page layout1ObjectivesTell the difference between data tables and layout tables.Create HTML tables using,.Use the attributes properly:#rowspan,colspan,align,valign,cellspacing,cellpadding,width,height.Use table layout and CSS layout properly.2Table usesHTML tables fall into 2 br

2、oad 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 layou

3、t 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.3Basic table structureWeb tables are made up of cells（which is where the content goes）,arranged int

4、o rows.The minimum elements for defining a table are,for establishing the table itself,for declaring a table row,and for creating table cells within the row.For example4Spanning rows and columnsData cells in a table can occupy more than one space in the grid created by the rows and columns.By specif

5、ying,we can make the cell span over 2 columns.For example,By specifying,we can make the cell span over 2 rows.For example,5Descriptive elementsTable header cells（indicated by the element）are used to provide important information or context about the cells in the row or column that they precede.The e

6、lement provides a title or brief description of the table.The caption element must immediately follow the opening table tag.table caption6Table cell spacingCell 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

7、 element.Cell padding refers to the amount of space between the cells border and the contents of the cell.It is specified with the cellpadding attribute in the table element.For example7Table and cell dimensionsBy default,a table will render just wide enough to contain all of its contents.You can ex

8、plicitly specify the width of a table using the width attribute in the table element.You can control the width and height of individual cells by using the width and height attributes in the td or th element.For example8Cell content alignmentThe align and valign attributes are used to specify the hor

9、izontal and vertical alignment of content within cells.Alignment may be specified for the following elements:#td,th,tr.For example9Responsible layout tablesStick to basic table elements.Use only the minimal table elements.Keep it simple and lightweight.Use style sheets for presentation.The secret to

10、 keeping a layout table simple and streamlined is to use it only to establish a basic layout grid and to use CSS for everything else related to presentation.For example10CSS layouts Masthead and headline Main article List of links copyright information 11CSS layouts.masthead background:#CCC;#padding

11、:#15px;#.main float:#left;#width:#70%;#margin-right:#3%;#margin-left:#3%;#.footer clear:#left;#/*starts the footer below the floated content*/padding:#15px;#background:#66612Reading assignmentChapter 2Chapter 3Chapter 4Chapter 5（5.1-5.6）Chapter 6*Chapter 7（7.1-7.7）13Homework4 enhance your sites layo

12、utAt least 7 pagesProper navigationUse tables and/or CSS to lay out the site properly.Use at least one external style sheet for the whole site（at least 3 class and/or id styles）.14ObjectivesTell the difference between data tables and layout tables.Create HTML tables using,.Use the attributes properly:#rowspan,colspan,align,valign,cellspacing,cellpadding,width,height.Use table layout and CSS layout properly.15Thats all for this chapter!#16