Tài liệu Web Programming with HTML, XHTML, and CSS- P4 doc

Thông tin tài liệu

The height Attribute (deprecated) The height attribute allows you to specify the height of a cell in pixels or as a percentage of the available space: height=”20” or height=”10%” The nowrap Attribute (deprecated) The nowrap attribute is used to stop text from wrapping onto a new line within a cell. You would use nowrap only when the text really would not make sense if it were allowed to wrap onto the next line (for example a line of code that would not work if it were spread across two lines). In HTML it was used without an attribute value, but that would not be allowed in Transitional XHTML. Rather, you would use the following: nowrap=”nowrap” The rowspan Attribute The rowspan attribute specifies the number of rows of the table a cell will span across, the value of the attribute being the number of rows the cell stretches across. (See the example in the section “Spanning Rows Using the rowspan Attribute” later in this chapter.) rowspan=”2” The scope Attribute The scope attribute can be used to indicate which cells the current header provides a label or header information for. It can be used instead of the headers attribute in basic tables, but does not have much support: scope=” range “ The table that follows shows the possible values of the attribute. Value Purpose row Cell contains header information for that row. col Cell contains header information for that column. rowgroup Cell contains header information for that rowgroup (a group of cells in a row created using the <thead>, <tbody>, or <tfoot> elements). colgroup Cell contains header information for that colgroup (a group of columns created using the <col> or <colgroup> element, both of which are discussed later in the chapter). 121 Chapter 4: Tables 59313c04.qxd:WroxPro 3/22/08 4:23 PM Page 121 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. The valign Attribute (deprecated) The valign attribute allows you to specify the vertical alignment for the content of the cell. Possible values are top, middle, bottom, and baseline, each of which is discussed more in the “The valign Attribute” section within the “The <tr> Element Contains Table Rows” section earlier in the chapter. The width Attribute (deprecated) The width attribute allows you to specify the width of a cell in pixels or as a percentage of the available space: width=”150” or width=”30%” You need to specify only the width attribute for the cells in the first row of a table, and the rest of the rows will follow the first row’s cell widths. If you specify a width attribute for the <table> element, and the widths of individual cells add up to more than that width, most browsers will squash those cells to fit them into the width of the table. You can also add a special value of *, which means that this cell will take up the remaining space available in the table. So if you have a table that is 300 pixels wide, and the first two cells in a row are specified as being 50 pixels wide, if the third cell has a value of * it will take up 200 pixels — the remaining width of the table. If the width of the table had not been specified, then the third column would take up the remaining width of the browser window. It is worth noting that you cannot specify different widths for <td> elements in corresponding columns of different rows of a table. So, if the first row of a table had three <td> elements whose widths are 100 pixels, the second row could not have one <td> element whose width was 200 pixels and two that are 50 pixels. Try It Out An Accessible Timetable In this example you create a timetable that is specifically designed to be accessible for those with visual impairments. Because you are likely to come across them in the real world, the example will contain some deprecated attributes. 1. Because this example contains deprecated attributes, you need to set up the skeleton ready to handle a Transitional XHTML 1.0 document: <?xml version=”1.0” encoding=”UTF-8”?> <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”> <html xmlns=”http://www.w3.org/1999/xhtml” lang=”en”> <head> <title>An accessible timetable</title> </head> <body> </body> </html> 122 Chapter 4: Tables 59313c04.qxd:WroxPro 3/22/08 4:23 PM Page 122 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. 2. Next you can add in the main elements required to create a table with three rows and three columns. The left-most column and the top row will contain headings. While you are doing this, you’ll add in some content for the table, too. The timetable will show a fictional weekend course on XHTML, with morning and afternoon sessions for Saturday and Sunday: <body> <table> <tr> <th></th> <th>Saturday</th> <th>Sunday</th> </tr> <tr> <th>Morning</th> <td>The structure of a document and how to mark up text.</td> <td>Adding tables and forms to pages. Splitting pages up into windows called frames.</td> </tr> <tr> <th>Afternoon</th> <td>Linking between pages and adding color images and objects to your pages.</td> <td>Using CSS to style your documents and make them look attractive.</td> </tr> </table> </body> 3. The next stage is to add id attributes to the <th> elements that have content, and header attributes to the <td> elements. The value of the header attributes should correspond to the values of the id attributes, indicating which headings correspond to each cell: <table> <tr> <th></th> <th id=”Saturday”>Saturday</th> <th id=”Sunday”>Sunday</th> </tr> <tr> <th id=”Morning”>Morning</th> <td headers=”Saturday Morning” abbr=”Structure and markup”>The structure of a document and how to markup text.</td> <td headers=”Sunday Morning” abbr=”Tables, forms and frames”>Adding tables and forms to pages. Splitting pages up into windows called frames</td> </tr> <tr> <th id=”Afternoon”>Afternoon</th> <td headers=”Saturday Afternoon” abbr=”Links, color, images, objects”>Linking between pages, and adding color images and objects to your pages.</td> 123 Chapter 4: Tables 59313c04.qxd:WroxPro 3/22/08 4:23 PM Page 123 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. <td headers=”Sunday Afternoon” abbr=”CSS”>Using CSS to style your documents and make them look attractive.</td> </tr> </table> 4. Save your file as table.html. The example in Figure 4-5 contains some CSS style rules that you learn more about in Chapter 8. Figure 4-5 How It Works The table is contained within the <table> element and its content is then written out a row at a time. Starting with the top row, you have three table heading elements. The first is empty because the top-left corner cell of the table is empty. The next two elements contain the headings for days. Remember that the id attributes will be used by individual table cells so they can indicate which headings correspond to them. <table> <tr> <th></th> <th id=”Saturday”>Saturday</th> <th id=”Sunday”>Sunday</th> </tr> </table> In the next row of the table, the first cell is a heading for that row, indicating that this row shows times for morning sessions. The second two cells show table data. The headers attributes contain the values of the id attributes on their corresponding header elements, and the abbr attributes contain an abbrevi- ation of the table cell content: <tr> <th id=”Morning”>Morning</th> <td headers=”Saturday Morning” abbr=”Structure and markup”>The structure of a document and how to markup text.</td> <td headers=”Sunday Morning” abbr=”Tables, forms and frames”>Adding tables and forms to pages. Splitting pages up into windows called frames</td> </tr> 124 Chapter 4: Tables 59313c04.qxd:WroxPro 3/22/08 4:23 PM Page 124 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. The final row uses the same structure as the second row: <tr> <th id=”Afternoon”>Afternoon</th> <td headers=”Saturday Afternoon” abbr=”Links, color, images, objects”>Linking between pages, and adding color images and objects to your pages.</td> <td headers=”Sunday Afternoon” abbr=”CSS”>Using CSS to style your documents and make them look attractive.</td> </tr> As long as you accept that each row is written out in turn, you will have no problem creating quite complex tables. To be honest, this example is quite a bit more complex than most tables you will come across. Not many people have gotten into the practice of using the id and header attributes on <table> elements, but it makes tables a lot easier to use for those with visual impairments, in particular when those tables have a lot of columns and rows. Nor will you often see the abbr attribute used on table cells. In fact, if you look at other people’s code around on the Web at the moment, you are more likely to come across the use of lots of deprecated attributes rather than these attributes. Including attributes like these will set you apart from other coders who have not yet learned to make their tables more accessible. Furthermore, awareness of accessibility issues is being required in an increasing number of job positions, so you should learn how to use such attributes. Advanced Tables Now that you’ve seen the basics behind creating tables, it’s time to look at some more advanced issues, such as the following: ❑ Splitting a table into three sections: a head, body, and foot ❑ Captioning tables ❑ Using the rowspan and colspan attributes to make cells stretch over more than one row or column ❑ Grouping columns using the <colgroup> element ❑ Sharing attributes between unrelated columns using the <col> element Splitting Up Tables Using a Head, Body, and Foot Tables can be divided into three portions: a header, a body, and a foot. The head and foot are rather similar to headers and footers in a word-processed document, which remain the same for every page, while the body is the main content of the table. 125 Chapter 4: Tables 59313c04.qxd:WroxPro 3/22/08 4:23 PM Page 125 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. The separation of the parts of the table allows for the richer formatting of tables by browsers. For example, when printing a table, browsers could print the head and foot of a table on each page if the table spreads to more than one page. Aural browsers, which read pages to users, could allow users to navigate between content and headers or footers with additional information easily. It was also intended that if the table was too large for a single page then the header and footer would remain in view, while the body of the table would gain a scroll bar. However, this is not supported in the major- ity of browsers. The three elements for separating the head, body, and foot of a table are: ❑ <thead> to create a separate table header ❑ <tbody> to indicate the main body of the table ❑ <tfoot> to create a separate table footer A table may contain several <tbody> elements to indicate different “pages” or groups of data. Here you can see an example of a table that makes use of these elements ( ch04_eg04.html): <table> <thead> <tr> <td colspan=”4”>This is the head of the table</td> </tr> </thead> <tfoot> <tr> <td colspan=”4”>This is the foot of the table</td> </tr> </tfoot> <tbody> <tr> <td>Cell 1</td> <td>Cell 2</td> <td>Cell 3</td> <td>Cell 4</td> </tr> <tr> more rows here containing four cells </tr> </tbody> <tbody> <tr> <td>Cell 1</td> <td>Cell 2</td> Note that the <tfoot> element must appear before the <tbody> element in the source document. 126 Chapter 4: Tables 59313c04.qxd:WroxPro 3/22/08 4:23 PM Page 126 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. <td>Cell 3</td> <td>Cell 4</td> </tr> <tr> more rows here containing four cells </tr> </tbody> </table> Figure 4-6 shows what this example looks like in Firefox, which supports the thead, tbody, and tfoot elements. Note that this example uses CSS to give the header and footer of the table a background shade, and that the font used in these elements is larger; also, the height of each <td> element has been set to 100 pixels to make the table larger. Figure 4-6 All three elements carry the same attributes. In addition to the universal attributes, they can carry the following attributes: align char charoff valign 127 Chapter 4: Tables 59313c04.qxd:WroxPro 3/22/08 4:23 PM Page 127 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. The align Attribute (deprecated) The align attribute is used to specify the horizontal positioning of the text and contained elements. The possible values for the align attribute are left, right, center, justify, and char, each of which was described in the “The align Attribute” subsection within the “The <tr> Element Contains Table Rows” section earlier in the chapter. The char Attribute The char attribute specifies a character, the first instance of which should be used to horizontally align the contents of each cell in the column group. (See the full description in the subsection “The char Attribute” within the “The <tr> Element Contains Table Rows’’ section earlier in the chapter.) The charoff Attribute The charoff attribute specifies the number of offset characters that can be displayed before the character specified as the value of the char attribute. (See the full description in the “The char Attribute” subsection within the section “The <tr> Element Contains Table Rows” earlier in the chapter.) The valign Attribute (deprecated) The valign attribute allows you to specify the vertical alignment for the content of the cells in each element. Possible values are top, middle, bottom, and baseline each of which is discussed more in the subsection “The valign Attribute” within the “The <tr> Element Contains Table Rows” section earlier in the chapter. Adding a <caption> to a Table To add a caption to a table, you just use the <caption> element after the opening <table> tag and before the first row or header: <table> <caption>Spanning columns using the colspan attribute</caption> <tr> By default, most browsers will display the contents of this attribute centered above the table, as shown in Figure 4-7 in the next section. Spanning Columns Using the colspan Attribute As you saw when looking at the <td> and <th> elements, both can carry an attribute that allows the table cell to span more than one column. Remember that whenever you work with tables, you need to think in terms of grids. The colspan attribute allows a cell to stretch across more than one column, which means it can stretch across more than one rectangle horizontally in the grid. Take a look at the following example, which uses the deprecated border, width, height, and bgcolor attributes to illustrate a point visually (ch04_eg05.html): <table border=”1”> <caption>Spanning columns using the colspan attribute</caption> <tr> <td bgcolor=”#efefef” width=”100” height=”100”> </td> 128 Chapter 4: Tables 59313c04.qxd:WroxPro 3/22/08 4:23 PM Page 128 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. <td bgcolor=”#999999” width=”100” height=”100”> </td> <td bgcolor=”#000000” width=”100” height=”100”> </td> </tr> <tr> <td bgcolor=”#efefef” width=”100” height=”100”> </td> <td colspan=”2” bgcolor=”#999999”> </td> </tr> <tr> <td colspan=”3” bgcolor=”#efefef” height=”100”> </td> </tr> </table> You can see here that, for each extra column that a cell spans, you do not add in a cell for that row. So, if a table has three columns and one of the cells spans two columns, you have only two <td> elements in that row. You might also have noticed the use of the non-breaking space character ( ) in the cells, which is included so that the cell has some content; without content for a table cell, some browsers will not display the background color (whether that color is specified using CSS or the deprecated bgcolor attribute). Figure 4-7 shows what this example would look like in a browser. Figure 4-7 Spanning Rows Using the rowspan Attribute The rowpsan attribute does much the same thing as the colspan attribute, but it works in the opposite direction; it allows cells to stretch vertically across cells. When you use a rowspan attribute, the corresponding cell in the row beneath it must be left out: <table border=”1”> <caption>Spanning rows using the colspan attribute</caption> <tr> <td bgcolor=”#efefef” width=”100” height=”100”> </td> 129 Chapter 4: Tables 59313c04.qxd:WroxPro 3/22/08 4:23 PM Page 129 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. <td bgcolor=”#999999” width=”100” height=”100”> </td> <td rowspan=”3” bgcolor=”#000000” width=”100” height=”100”> </td> </tr> <tr> <td bgcolor=”#efefef” height=”100”> </td> <td rowspan=”2” bgcolor=”#999999”> </td> </tr> <tr> <td bgcolor=”#efefef” height=”100”> </td> </tr> </table> You can see the effect of the rowspan attribute in Figure 4-8. Figure 4-8 The rowspan and colspan attributes were particularly popular with designers who used tables to control the layout pages; but this technique has largely been replaced by the use of CSS to control layouts. Grouping Columns Using the <colgroup> Element If you are creating complex tables, you can group one or more adjacent columns together using the <colgroup> element. It is particularly helpful when two or more adjacent columns contain similar types of information. This allows you to apply formatting to the group of columns rather than having to style each column separately. When you look at CSS in Chapter 7, you will see how the class attribute is used to associate this column group with a particular style. For example, in the following table, there are 12 columns. The first eight columns are in the first column group, the next two columns are in the second column group, and the final two columns are in the third column group: <table> <colgroup span=”8” width=”75” class=”mainColumns” /> 130 Chapter 4: Tables 59313c04.qxd:WroxPro 3/22/08 4:23 PM Page 130 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. [...]... Accessibility Issues with Tables Because tables can create a grid, a lot of designers used to use them to control the layout of whole documents, and entire web pages would be built inside a table Before you even consider using tables to control the layout of a document, it is important to understand how they are dealt with by non-visual user agents, such as voice browsers; otherwise, those with visual impairments... this you need to add an id or name attribute to identify the form The value of the id attribute should be unique within the document, and it should also follow the other rules mentioned in Chapter 1 Some people start the value of id and name attributes for forms with the characters frm and then use the rest of the value to describe the kind of data the form collects, for example, frmLogin or frmSearch... user, and you can group columns together so that you can preserve structure and so they can share styles and attributes Finally, you saw some of the accessibility issues regarding use of tables It is important to be aware of the process of linearization, which a screen reader performs before reading a table to a user, so that your sites are accessible to users with visual impairments The chapter ended with. .. such as Search, Send, or Proceed — and often pressing the return key on the keyboard has the same effect as clicking this button) This indicates that the user has filled out the form, and this usually sends the form data to a web server Once the data that you have entered arrives at the server, a script or other program usually processes the data and sends a new web page back to you The returned page... common page layout Figure 4-10 The layout in Figure 4-10 is created using a table with two columns and three rows: ❑ In the first row, the header and logo are in a cell that spans both columns ❑ In the second row, the first cell contains the navigation bar, while the second cell contains a nested table with three rows and just one column ❑ In the third row, the cell spans both columns like the first... 59313c05.qxd:WroxPro 3/22/08 4:37 PM Page 143 Chapter 5: Forms As with the id attribute, the value should be unique to the document In addition, you will often see the value of this attribute begin with the characters frm followed by the purpose of the form The onsubmit Attribute At some point, you have probably filled in a form on a web site, and then, as soon as you have clicked the button to send the... element near the start or end of the document, or, if you are using tables for layout purposes in a Transitional XHTML 1.0 document, between the and elements (You should be aware that this latter approach is a cheat, and therefore it might cause an error if you tried to validate the page However, most browsers will still display the table and form as you intended.) Form Controls This... or reset a form and even to trigger client-side scripts (For example, on a basic loan calculator form within the page, a button might be used to trigger the script that calculates repayments without sending the data to the server.) You can create a button in three ways: ❑ Using an element with a type attribute whose value is submit, reset, or button ❑ Using an element with a type attribute... cannot be found and also helps speech browsers (It was first supported only in IE 5 and Netscape 6.) If the image button has a name attribute, when you click it, the browser sends a name/value pair to the server The name will be what you provide for the name attribute and the value will be a pair of x and y coordinates for where on the button the user clicked (just as you saw when dealing with server-side... boxes that you have to check on paper forms As with light switches, they can be either on or off When they are checked they are on and the user can simply toggle between on and off positions by clicking the checkbox Checkboxes can appear individually, with each having its own name, or they can appear as a group of checkboxes that share a control name and allow users to select several values for the . timetable will show a fictional weekend course on XHTML, with morning and afternoon sessions for Saturday and Sunday: <body> <table> <tr> <th></th> <th>Saturday</th> <th>Sunday</th> </tr> <tr> <th>Morning</th> <td>The. frames.</td> </tr> <tr> <th>Afternoon</th> <td>Linking between pages and adding color images and objects to your pages.</td> <td>Using CSS to style your documents and make them look attractive.</td> </tr> </table> </body> 3.

Ngày đăng: 21/01/2014, 16:20

Xem thêm: Tài liệu Web Programming with HTML, XHTML, and CSS- P4 doc