《New Perspectives on Creating Web Pages with HTML, XHTML, and XM(-72)》由会员分享，可在线阅读，更多相关《New Perspectives on Creating Web Pages with HTML, XHTML, and XM(-72)（72页珍藏版）》请在金锄头文库上搜索。
1、XPDesigning a Web Page with TablesTutorial 4Creating a News PageTutorial 41XPObjectivesCreate a text table with preformatted textCreate the basic structure of a graphical tableOrganize table rows into groupsAdd captions to tablesDescribe how to add summary information to a tableTutorial 42XPObjectiv
2、esUse table borders and gridlinesSpecify width and height for different table elementsFormat table cell contentsApply a background image and color to a tableAlign table and cell contentsTutorial 43XPObjectivesDescribe different types of page layouts you can achieve with tablesWork with fixed-width a
3、nd fluid layoutsCreate newspaper-style layout using tablesTutorial 44XPA text table:contains only text, evenly spaced on the Web page in rows and columnsuses only standard word processing charactersA graphical table:is displayed using graphical elements can include design elements such as background
4、 colors, and colored borders with shadingallows you to control the size of tables cells, rows, columns and alignment of text within the tableA table can be displayed on a Web page either in a text or graphical format.Tables on the World Wide WebTutorial 45XPA Text TableThis figure shows a text table
5、.Tutorial 46XPA Graphical TableThis figure shows a graphical tableTutorial 47XPConsiderations for Text and Graphical TablesGraphical tables are more flexible and attractive, however there are some situations when a text table is neededWorking with tags for graphical tables can be complicated and tim
6、e-consumingfor these reasons, you might want to create two versions of a Web page: one that uses only text elements, and another that uses graphical elementsTutorial 48XPText TablesUsing Fixed-Width FontsWhen you create a text table, the font you use is importantA text table relies on space and the
7、characters that fill those spaces to create its column boundariesUse a fixed-width, or mono-space, font so that the columns align properlyFixed-width fonts use the same amount of space for each characterTutorial 49XPUsing Proportional FontsProportional fonts assign a different amount of space for ea
8、ch character depending on the width of that characterfor example, since the character “m is wider than the character “1, a proportional font assigns it more spaceProportional fonts are more visually attractive, and typically easier to read, than fixed-width fontsProportional fonts in a text table ca
9、n cause errors when the page is rendered in the users browserTutorial 410XPColumn Alignment Problemswith Proportional FontsA text table that uses a proportional font loses alignment when the font size is increased or decreased.Columns look alignedColumns lose alignmentColumns lose alignmentTutorial
10、411XPColumn Alignmentwith Fixed-Width FontsFixed-width fonts allow the columns to remain aligned regardless of font size.Different browsers and operating systems may use different font sizes to display your pages text, so you should always use a fixed width font to ensure that the columns in your te
11、xt tables remain in alignment.Columns align regardless of font sizeTutorial 412XPUsing Preformatted TextThe tag creates preformatted text and retains any spaces or line breaks indicated in the HTML file.preformatted text is text formatted in ways that HTML would otherwise not recognizeThe tag displa
12、ys text using a fixed-width fontBy using the tag, a text table can be displayed by all browsers, and the columns will retain their alignment no matter what font the browser is usingMost of the time, the tag will be used to insert tables into a Web pageTutorial 413XPText Table Created with the Tagtex
13、t will appear in the browser as it appears here The complete preformatted text as it appears in the file.Tutorial 414XPText Table as it Appearsin the Browsertable text appears in a fixed width font The page as it appears in the browser.Tutorial 415XPGraphical TablesDefining a Table StructureThe firs
14、t step to creating a table is to specify the table structure:the number of rows and columnsthe location of column headingsthe placement of a table captionOnce the table structure is in place, you can start entering data into the tableTutorial 416XPUsing the , , and TagsGraphical tables are enclosed
15、within a two-sided tag that identifies the start and ending of the table structureEach row of the table is indicated using a two-sided (for table row)Within each table row, a two-sided (for table data) tag indicates the presence of individual table cellsTutorial 417XPThe Graphical Table SyntaxThe ge
16、neral syntax of a graphical table is: First Cell Second Cell Third Cell Fourth Cell This creates a table with two rows and two columnsTutorial 418XPA Simple TableThe layout of a graphical tabletwo rowstwo columnsTutorial 419XPHTML Structure of a Tablebeginning of the table structure first row of six
17、 in the table end of the table structure table cellsYou do not need to indent the tags or place them on separate lines, but you may find it easier to interpret your code if you do so.After the table structure is in place, youre ready to add the text for each cell.Tutorial 420XPCreating Headings with
18、 the TagHTML provides the tag for table headingsText formatted with the tag is centered within the cell and displayed in a boldface fontThe tag is most often used for column headings, but you can use it for any cell that you want to contain centered boldfaced textTutorial 421XPAdding Table Headings
19、to the TableText in cells formatted with the tag is bold and centered above each table columnRow of table headings Tutorial 422XPResult of Table Headingsas Displayed in the Browsertable headings appear bold and centered over their columns Tutorial 423XPIdentifying the Table Heading,Body, and FooterH
20、TML allows you to identify the different parts of your table using the , , and tags is used for the table heading is used for the table body is used for the table footerThese tags do not format the table, but they do contain collections of rows called row groupsTutorial 424XPThe Table Heading,Body,
21、and Footer SyntaxThe table heading, body, and footer syntax is: heading information . . . footer information . . . first group of table rows . . . second group of table rows . . .Tutorial 425XPTable Heading, Body, and FooterA single table can contain several tags to identify different parts of the t
22、ableThe and sections must appear before any sections in the table structureThese tags are most often used in a table that draws its data from an external data source, or tables that span several Web pagesThe browser will repeat those sections across multiple pagesNot all browsers support this capabi
23、lityTutorial 426XPCreating a Table CaptionHTML allows you to specify a caption for a tableThe syntax for creating a caption is: caption textalignment indicates the caption placementa value of “bottom centers the caption below the tablea value of “top or “center centers the caption above the tablea v
24、alue of “left or “right place the caption above the table to the left or rightTutorial 427XPTable CaptionsInternet Explorer also supports the “center value for a caption. Older browsers only support “top and “bottom because HTML 3.2 only specified these optionsThe tag works only with tables, the tag
25、 must be placed within the table structureCaptions are shown as normal text without special formattingCaptions can be formatted by embedding the caption text within other HTML tagsfor example, place the caption text within a pair of and tags causes the caption to display as bold and italicTutorial 4
26、28XPInserting a Table Captioncaption will be centered above the table caption text Placing the caption text within a pair of tags causes the caption to display as boldTutorial 429XPResult of a Table Captiontable caption A table with captionTutorial 430XPModifying the Appearance of a TableYou can mod
27、ify the appearance of a table by adding:gridlinesbordersbackground colorHTML also provides tags and attributes to control the placement and size of a tableTutorial 431XPWorking with the Table BorderBy default, browsers display tables without table bordersA table border can be added using the border
28、attribute to the tagThe syntax for creating a table border is: value is the width of the border in pixelsThe size attribute is optional; if you dont specify a size, the browser creates a table border 1 pixel wideTutorial 432XPTables with Different Borders ValuesThe effect on a tables border when the
29、 border size is variedTutorial 433XPAdding a 5-Pixel Border to a TableOnly the outside border is affected by the border attribute; the internal gridlines are not affectedTutorial 434XPTable Frames and RulesThe frame attribute was introduced in HTML 4.01- therefore might not be supported in older bro
30、wsersWith the frame and rule attributes you can control how borders and gridlines are applied to the tableThe frames attribute allows you to determine which sides of the table will have bordersThe frame attribute syntax is: type is either “box (the default), “above, “below, “hsides, “vsides, “lhs, “
31、rhs, or “voidTutorial 435XPValues of the Frame AttributeTutorial 436XPEffect of Different Frame ValuesTutorial 437XPCreating Frames and RulesThe rules attribute lets you control how the table gridlines are drawnThe syntax of the rules attribute is: type is either “all, “rows, “cols, or “noneTutorial
32、 438XPEffect of Different Rules ValuesTutorial 439XPSizing a TableCell SpacingThe cell spacing attribute controls the amount of space inserted between table cellsThe syntax for specifying the cell space is: value is the width of the interior borders in pixelsthe default cell spacing is 2 pixelsCell
33、spacing refers to the space between the cellsTutorial 440XPTables with Different Cell Spacing ValuesDifferent cell spacing values and a tables appearanceTutorial 441XPSetting the Cell Spacing to 0 PixelsSetting the cellspacing to 0 reduces the width of the borders between individual table cells. Thi
34、s will not remove the border between the cells. Tutorial 442XPCell PaddingTo control the space between the table text and the cell borders, add the cell padding attribute to the table tagThe syntax for this attribute is: value is the distance from the table text to the cell border, as measured in pi
35、xelsthe default cell padding value is 1 pixelCell padding refers to the space within the cellsTutorial 443XPTables with Different Cell Padding ValuesThe effect of changing the cell padding value for a tableTutorial 444XPSetting the Cell Padding to 4 PixelsA table with an increased amount of cell pad
36、ding.By increasing the cell padding, you added needed space to the table.Tutorial 445XPWorking with Table and Cell SizeThe size of a table is determined by the text it contains in its cellsBy default, HTML places text on a single lineAs you add text in a cell, the width of the column and table expan
37、ds to the edge of the pageonce the page edge is reached, the browser reduces the size of the remaining columns to keep the text to a single lineYou can insert a line break, paragraph or heading tag within a cellTutorial 446XPWorking with Table and Cell SizeWhen the browser can no longer increase or
38、decrease the size of the column and table it wraps the text to a second lineAs more text is added, the height of the table expands to accommodate the additional textIt is important to manually define the size of the table cells and the table as a wholeTutorial 447XPDefining the Table SizeThe syntax
39、for specifying the table size is: size is the width and height of the table as measured in pixels or as a percentage of the display areaTo create a table whose height is equal to the entire height of the display area, enter the attribute height=“100%If you specify an absolute size for a table in pix
40、els, its size remains constant, regardless of the browser or monitor settings usedRemember that some monitors display Web pages at a resolution of 640 by 480 pixelsTutorial 448XPSetting the Width of theTable to 70% of the page widthTutorial 449XPSetting Cell and Column SizesTo set the width of an in
41、dividual cell, add the width attribute to either the or tagsThe syntax is: width=“valuevalue can be expressed either in pixels or as a percentage of the table widtha width value of 30% displays a cell that is 30% of the total width of the tableTutorial 450XPSetting Cell and Column SizesThe height at
42、tribute can be used in the or tags to set the height of individual cellsThe height attribute is expressed either in pixels or as a percentage of the height of the tableIf you include more text than can be displayed within that height value you specify, the cell expands to display the additional text
43、Tutorial 451XPSpanning Rows and ColumnsTo merge several cells into one, you need to create a spanning cellA spanning cell is a cell that occupies more than one row or column in a tableSpanning cells are created by inserting the rowspan and colspan attribute in a or tag.The syntax for these attribute
44、s is: value is the number of rows or columns that the cell spans in the tableTutorial 452XPSpanning Rows and ColumnsWhen a cell spans several rows or columns, it is important to adjust the number of cell tags used in the table rowWhen a cell spans several rows, the rows below the spanning cell must
45、also be adjustedTutorial 453XPExample of Spanning CellsThis cell spans two columns and two rowsThis cell spans three columnsThis cell spans three rowsTutorial 454XPA Table Structure with a Row-Spanning CellHTML coderesulting tablefour table cells in the first row only three table cells are required
46、for the second and third rows Tutorial 455XPAdding Spanning Cells to a Tablethis cell spans two columns these cells span three rowsTutorial 456XPResults of a Table with Spanning Cellsspanning cellsTutorial 457XPAligning a Table and its ContentsBy default, cell text is placed in the middle of a cell,
47、 aligned with the cells left edgeYou can specify a different horizontal alignment for a or element with:align=“positionTutorial 458XPAligning a Table on the Web PageTo align a table with the surrounding text, use the align attribute as follows: align=“alignmentalignment equals “left, “right, or “cen
48、terleft or right alignment places the table on the margin of the Web page and wraps surrounding text to the sidecenter alignment places the table in the horizontal center of the page, but does not allow text to wrap around itThe align attribute is similar to the align attribute used with the tagTuto
49、rial 459XPAligning the Contents of a TableBy default, cell text is placed in the middle of the cell, aligned with the cells left edgeBy using the align and valign attributes, you can specify the texts horizontal and vertical placementTo align the text for a single column, you must apply the align at
50、tribute to every cell in that columnTutorial 460XPValues of the align and valign attributesTutorial 461XPSetting a Background ColorTable elements support the bgcolor attribute. To specify a background color for all of the cells in a table, all of the cells in a row, or for individual cells, by addin
51、g the bgcolor attribute to either the , , , or tags as follows:color is either a color name or hexadecimal color valueTutorial 462XPResults of a Table with a Colored BackgroundTutorial 463XPApplying a Background Imageto a Table, Row, and Cellparch.jpgTutorial 464XPWorking with Column GroupsTags allo
52、w you to manipulate the features of entire columns and groups of columnsthis feature is currently only supported by Internet Explorer 4.0 or above, and not at all by Netscapethis feature shouldnt be used if your page is to be viewed by multiple browsers and browser versionsTo define a column, add th
53、e following tag to the top of the table structure: value is the number of columns in the groupThe tag supports the align, bgcolor, valign, and width attributesTutorial 465XPThe TagAnother way of grouping columns is by using the tagThe syntax of the tag is:colgroup span=“valuecolumnsvalue is the numb
54、er of columns in the group, and columns are definitions for individual columns within the group (defined using the tag.)In the event of a conflict between the attributes in the and tags, the tag attributes take precedenceTutorial 466XPUsing Tables for LayoutHTML tables are most often used to define
55、the layout of an entire Web pageIf you want to design a page that displays text in newspaper style columns, or separates the page into distinct sections, youll find tables an essential and useful toolTutorial 467XPUsing Tables for LayoutColumnar layout: page content is placed in columnsSectional lay
56、out: page is broken into sections, placing each section into its own tableJigsaw table or jigsaw layout: page content is broken into separate pieces to create almost any kind of layoutTutorial 468XPFixed-width and Fluid LayoutsFixed-width layout: Web designer defines exact size of every table elemen
57、t in absolute units such as pixelsGives designer precise control over appearance, but does not take into account the size of the browser windowFluid layout: one or more table elements are sized as a percentage of the page widthPage content flows into blank areas as the size of the browser window inc
58、reases, but sometimes results in long lines of textTutorial 469XPCreating a Newspaper-Style LayoutCreate two tables inside another nested tablesTutorial 470XPUsing Nested TableTables can be created within another table making the Web page easier to manageTutorial 471XPThe Result of the Web Page using Nested TablesTutorial 472
