beginning html xhtml css and javascript phần 3 pdf

Chapter 4: Tables 146 The < td > and < th > Elements Represent Table Cells Every cell in a table will be represented by either a < td > element for cells containing table data or a < th > element for cells containing table headings. By default, the contents of a < th > element are usually displayed in a bold font, horizontally aligned in the center of the cell. The content of a < td > element, meanwhile, will usually be displayed left - aligned and not in bold (unless otherwise indicated by CSS or another element). The < td > and < th > elements can both carry the same set of attributes, and the attribute only applies to that one cell carrying it. Any effect these attributes have will override settings for the table as a whole or any containing element (such as a row). In addition to the universal attributes and the basic event attributes, the < td > and < th > elements can also carry the following attributes: abbr align axis bgcolor char charoff colspan headers height nowrap rowspan scope valign width The abbr Attribute The abbr attribute is used to provide an abbreviated version of the cell ’ s content. abbr=”description of services” While the major browsers do not currently support this attribute, it ’ s possible that it will be used by some of the increasing number of devices with small screens accessing the Internet. For example, if a browser with a small screen is being used to view the page, the content of this attribute could be displayed instead of the full content of the cell. The align Attribute (Deprecated) The align attribute sets the horizontal alignment for the content of the cell. align=” alignment ” The possible values for the align attribute are left , right , center , justify , and char , each of which was described earlier in “The < tr > Element Contains Table Rows” section. The axis Attribute The axis attribute allows you to add conceptual categories to cells and therefore represent n - dimensional data. The value of this attribute would be a comma - separated list of names for each category the cell belonged to. axis=”heavy, old, valuable” Rather than having a visual formatting effect, this attribute allows you to preserve data, which then may be used programmatically, such as querying for all cells belonging to a certain category. c04.indd 146c04.indd 146 11/20/09 4:14:00 PM11/20/09 4:14:00 PM Chapter 4: Tables 147 The bgcolor Attribute (Deprecated) The bgcolor attribute sets the background color for the cell. The value of this attribute should be either a color name or a hex code — both are covered in Appendix D. bgcolor=”red” It has been replaced by the background - color property in CSS. The char Attribute The char attribute specifies a character, the first instance of which should be used to horizontally align the contents of a cell. (See the full description in the “ The char Attribute ” subsection 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 charoff Attribute ” subsection within the “ The < tr > Element Contains Table Rows ” section earlier in the chapter.) The colspan Attribute The colspan attribute is used when a cell should span across more than one column. The value of the attribute specifies how many columns of the table a cell will span across. (See the section “ Spanning Columns Using the colspan Attribute ” later in this chapter.) colspan=”2” The headers Attribute The headers attribute is used to indicate which headers correspond to that cell. The value of the attribute is a space - separated list of the header cells ’ id attribute values: headers=”income q1” The main purpose of this attribute is to support voice browsers. When a table is being read to you, it can be hard to keep track of which row and column you are on; therefore, the header attribute is used to remind users which row and column the current cell ’ s data belongs to. 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%” It has been replaced by the CSS height property. 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). When it was initially c04.indd 147c04.indd 147 11/20/09 4:14:01 PM11/20/09 4:14:01 PM Chapter 4: Tables 148 introduced in HTML, it was used without an attribute value, but that would not be allowed in XHTML. Rather, you would have to 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). 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 was discussed earlier in the chapter in the subsection entitled “ The valign Attribute ” within the section “ The < tr > Element Contains Table Rows . ” The width Attribute (Deprecated) The width attribute allows you to specify the width of a cell in pixels, or as a percentage of the table: width=”150” or width=”30%” c04.indd 148c04.indd 148 11/20/09 4:14:01 PM11/20/09 4:14:01 PM Chapter 4: Tables 149 You only need to specify 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 had already specified 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 different < td > elements that belong in the same column. So, if the first row of a table had three < td > elements whose widths were 100 pixels, the second row could not have one < td > element whose width was 200 pixels and two that were 50 pixels. Try It Out An Opening Hours Table In this example, you will create a table that shows the opening hours of the Example Caf é web site we have been working on throughout the book. The table will look like the one shown in Figure 4 - 9. Figure 4 - 9 1. Start off by opening the contact.html file in your text or XHTML editor; we will be adding a table to show serving hours beneath the e-mail link. 2. The table is contained within the < table > element and its content is then written out a row at a time. The table has three rows and eight columns. c04.indd 149c04.indd 149 11/20/09 4:14:01 PM11/20/09 4:14:01 PM Chapter 4: Tables 150 Starting with the top row, you have eight table heading elements. The first < th > element is empty because the top - left corner cell of the table is empty. The next seven elements contain the days of the week. In the second row of the table, the first cell acts as a heading for that row, indicating the meal (breakfast). The remaining cells show what times these meals are served. The third row follows the same format as the second row but shows times for lunch. < table > < tr > < th > < /th > < th > Monday < /th > < th > Tuesday < /th > < th > Wednesday < /th > < th > Thursday < /th > < th > Friday < /th > < th > Saturday < /th > < th > Sunday < /th > < /tr > < tr > < th > Breakfast < /th > < td > 7:00am - 10:00am < /td > < td > 7:00am - 10:00am < /td > < td > 7:00am - 10:00am < /td > < td > 7:00am - 10:00am < /td > < td > 7:00am - 11:00am < /td > < td > 8:00am - 11:30pm < /td > < td > 8:00am - 11:30pm < /td > < /tr > < tr > < th > Lunch < /th > < td > 11:30am - 2:30pm < /td > < td > 11:30am - 2:30pm < /td > < td > 11:30am - 2:30pm < /td > < td > 11:30am - 2:30pm < /td > < td > 11:30am - 2:30pm < /td > < td > 11:30am - 3:30pm < /td > < td > 11:30am - 3:30pm < /td > < /tr > < /table > < /body > As long as you accept that each row is written out in turn, you will have no problem creating quite complex tables. 3. Save your file as contact.html. c04.indd 150c04.indd 150 11/20/09 4:14:02 PM11/20/09 4:14:02 PM Chapter 4: Tables 151 Adding a < caption > to a Table Whether your table shows results for a scientific experiment, values of stocks in a particular market, or what is on television tonight, each table should have a caption so that visitors to your site know what the table is for. Even if the surrounding text describes the content of the table, it is good practice to give the table a formal caption using the < caption > element. By default, most browsers will display the contents of this element centered above the table, as shown in Figure 4 - 10 in the next section. The < caption > element appears directly after the opening < table > tag; it should come before the first row: < table > < caption > Opening hours for the Example Cafe < /caption > < tr > By using a < caption > element, rather than just describing the purpose of the table in a previous or subsequent paragraph, you are directly associating the content of the table with this description — and this association can be used by screen readers and by applications that process web pages (such as search engines). Grouping Sections of a Table In this section, you are going to look at some techniques that allow you to group together cells, rows, and columns of a table, and learn the advantages that doing this can bring. In particular, you will see how to do the following: Use the rowspan and colspan attributes to make cells stretch over more than one row or column Split a table into three sections: a head, body, and foot Group columns using the < colgroup > element Share attributes between unrelated columns using the < col > element Spanning Columns Using the colspan Attribute As you saw when looking at the < td > and < th > elements, both can carry an attribute called colspan that allows the table cell to span (or stretch) across more than one column. If you look at Figure 4 - 10, you can see a table that has three rows; the cells of the table are shaded to illustrate the colspan attribute in action: The first row has three columns of equal width, and there is one cell for each column. In the second row, the first cell is the width of one column, but the second cell spans the width of two columns. The third row has just one cell that spans all three columns. ❑ ❑ ❑ ❑ ❑ ❑ ❑ c04.indd 151c04.indd 151 11/20/09 4:14:02 PM11/20/09 4:14:02 PM Chapter 4: Tables 152 Let ’ s take a look at the code for this example to see how the colspan attribute is used. This example also uses the deprecated border , width , height , and bgcolor attributes in order to illustrate a point visually ( ch04_eg04.html ): < table border=”1” > < caption > Spanning columns using the colspan attribute < /caption > < tr > < td bgcolor=”#efefef” width=”100” height=”100” > & nbsp; < /td > < td bgcolor=”#999999” width=”100” height=”100” > & nbsp; < /td > < td bgcolor=”#000000” width=”100” height=”100” > & nbsp; < /td > < /tr > < tr > < td bgcolor=”#efefef” width=”100” height=”100” > & nbsp; < /td > < td colspan=”2” bgcolor=”#999999” > & nbsp; < /td > < /tr > < tr > < td colspan=”3” bgcolor=”#efefef” height=”100” > & nbsp; < /td > < /tr > < /table > In the first row, you can see that there are three < td > elements, one for each cell. In the second row, there are only two < td > elements, and the second of these elements carries a colspan attribute. The value of the colspan attribute indicates how many columns the cell should stretch across. In this case, the second cell spans two columns; therefore, it has a value of 2 . In the final row, there is just one < td > element, and this time the colspan attribute has a value of 3 , which indicates that it should take up three columns. Figure 4-10 c04.indd 152c04.indd 152 11/20/09 4:14:02 PM11/20/09 4:14:02 PM Chapter 4: Tables 153 As I mentioned at the start of this chapter, when dealing with tables you have to think in terms of grids. This grid is three cells wide and three rows tall, so the middle row could not have two equal - sized cells (because they would not fit in the grid — you cannot have a cell spanning 1.5 columns). An example of where the colspan attribute might be useful is in creating a timetable or schedule where the day is divided into hours — some slots lasting one hour, others lasting two to three hours. You might also have noticed the use of the non - breaking space character ( & nbsp; ) 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). Spanning Rows Using the rowspan Attribute The rowspan 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. You can see the effect of the rowspan attribute in Figure 4 - 11. Figure 4-11 When you use a rowspan attribute, the corresponding cell in the row beneath it must be left out ( ch04_eg05.html ): < table border=”1” > < caption > Spanning rows using the colspan attribute < /caption > < tr > < td bgcolor=”#efefef” width=”100” height=”100” > & nbsp; < /td > < td bgcolor=”#999999” width=”100” height=”100” > & nbsp; < /td > < td rowspan=”3” bgcolor=”#000000” width=”100” height=”100” > & nbsp; < /td > < /tr > < tr > < td bgcolor=”#efefef” height=”100” > & nbsp; < /td > < td rowspan=”2” bgcolor=”#999999” > & nbsp; < /td > c04.indd 153c04.indd 153 11/20/09 4:14:03 PM11/20/09 4:14:03 PM Chapter 4: Tables 154 < /tr > < tr > < td bgcolor=”#efefef” height=”100” > & nbsp; < /td > < /tr > < /table > The rowspan and colspan attributes were popular with designers who used tables to control the layout pages, but tables are rarely used to lay out pages these days, and this technique has largely been replaced by the use of CSS to control layouts. Splitting Up Tables Using a Head, Body, and Foot There are occasions when you may wish to distinguish between the body of a table (where most of the data is held) and the headings or maybe even the footers. For example, think of a bank statement: you may have a table where the header contains column headings, the body contains a list of transactions, and the footer contains the balance in the account. If the table is too long to show on a screen, then the header and footer might remain in view all the time, while the body of the table gains a scrollbar. Similarly, when printing a long table that spreads over more than one page, you might want the browser to print the head and foot of a table on each page. Unfortunately, the main browsers do not yet support these ideas. However, if you add these elements to your tables, you can use CSS to attach different styles to the contents of the < thead > , < tbody > , and < tfoot > elements. It can also help those who use aural browsers, which read pages to users. 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 also contain several < tbody > elements to indicate different “ pages ,” or groups of data. Note that the < tfoot > element must appear before the < tbody > element in the source document. Here you can see an example of a table that makes use of these elements ( ch04_eg06.html ): < table > < thead > < tr > < th > Transaction date < /th > < th > Payment type and details < /th > < th > Paid out < /th > ❑ ❑ ❑ c04.indd 154c04.indd 154 11/20/09 4:14:03 PM11/20/09 4:14:03 PM Chapter 4: Tables 155 < th > Paid in < /th > < th > Balance < /th > < /tr > < /thead > < tfoot > < tr > < td > < /td > < td > < /td > < td > $1970.27 < /td > < td > $2450.00 < /td > < td > $8940.88 < /td > < /tr > < /tfoot > < tbody > < tr > < td > 12 Jun 09 < /td > < td > Amazon.com < /td > < td > $49.99 < /td > < td > < /td > < td > $8411.16 < /td > < /tr > < tr > < td > 13 Jun 09 < /td > < td > Total < /td > < td > $60.00 < /td > < td > < /td > < td > $8351.16 < /td > < /tr > < tr > < td > 14 Jun 09 < /td > < td > Whole Foods < /td > < td > $75.28 < /td > < td > < /td > < td > $8275.88 < /td > < /tr > < tr > < td > 14 Jun 09 < /td > < td > Visa Payment < /td > < td > $350.00 < /td > < td > < /td > < td > $7925.88 < /td > < /tr > < tr > < td > 15 Jun 09 < /td > < td > Cheque 122501 < /td > < td > < /td > < td > $1450.00 < /td > < td > $9375.88 < /td > < /tr > < /tbody > < tbody > < tr > c04.indd 155c04.indd 155 11/20/09 4:14:04 PM11/20/09 4:14:04 PM [...]... a Transitional XHTML 1.0 document: Ultimate brunch course < /html> 2 The table has three rows and three columns; the first row and the left column... example, the class attribute is used to attach CSS rules that tell the browser the width of each column in the group and the background color for each cell You will learn more about CSS in Chapter 7, but it is worth noting that some browsers support only a subset of the CSS rules for this element You can see what this example looks like in Figure 4- 13 Figure 4- 13 In addition to the universal attributes,... are able to remind the user of the column and row they are currently in, but this works far better when the table uses elements for headers And if you are building a complex table, you can also enhance this information using the id, scope, and headers attributes, covered in the following section Using the id, scope, and headers Attributes The id, scope, and headers attributes have already been... submit button, and so on) live between the opening and closing tags A element can also contain other XHTML markup as you would find in the rest of a page Once users have entered information into a form, they usually have to click what is known as a submit button (although the actual text on the button may say something different such as Search, Send, or Proceed — and often pressing... 11/20/09 4:19 :39 PM Chapter 5: Forms Here is the code for the simple search form shown in Figure 5 -3: Search the site The element carries an attribute called action whose value is the URL of the page on the web server that handles search... 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 You’ve met the element, so this... not considered very secure In order to make them secure you should use an SSL connection between the client and server and encrypt any sensitive data (such as passwords and credit card details) SSL connections and encryption should be covered in a book about server-side languages such as ASP.NET and PHP Multiple-Line Text Input Controls If you want to allow a visitor to your site to enter more than one... abbr=”Sweet breakfasts”>Sweet treats: pancakes and waffles. Fry pan specials: Fritters and hash browns. 4 Save your file as course .html 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 elements,... tables are based on a grid pattern and use the four basic elements: , which contains each table; , which contains the rows of a table; , which contains a cell of table data; and , which represents a cell that contains a heading You have also seen how you can add headers, footers, and captions to tables It is particularly helpful to add a and element to any table that... help a reader relate between the content and the information in headers or footers You can now make cells span both columns and rows, although you should avoid doing this in tables that contain data, as it makes them harder for aural browsers to read to a user You have also seen how to group columns so that you can preserve structure, and so they can share styles and attributes Finally, you saw some of . 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”. 11 :30 am - 2 :30 pm < /td > < td > 11 :30 am - 2 :30 pm < /td > < td > 11 :30 am - 2 :30 pm < /td > < td > 11 :30 am - 2 :30 pm < /td > < td > 11 :30 am. 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 > Ultimate