Web Programming with HTML, XHTML, and CSS- P4

Chia sẻ: Thanh Cong | Ngày: | Loại File: PDF | Số trang:50

Thêm vào BST

Báo xấu

111
lượt xem 17
download

Download Vui lòng tải xuống để xem tài liệu đầy đủ

Web Programming with HTML, XHTML, and CSS- P4: There are a lot of books about designing and building web pages, so thank you for picking up this one. Why do I think it is different? Well, the Web has been around for over a decade now, and during its life many technologies have been introduced to help you create web pages, some of which have lasted, others of which have disappeared. Many books that teach you to write web pages are revisions of earlier versions of the same book and therefore still take the same approach as the previous edition did....

Chủ đề:

Bình luận(0) Đăng nhập để gửi bình luận!

Lưu

Nội dung Text: Web Programming with HTML, XHTML, and CSS- P4

Chapter 4: Tables 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 with- out 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 , , or elements). colgroup Cell contains header information for that colgroup (a group of columns created using the or element, both of which are discussed later in the chapter). 121
Chapter 4: Tables 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 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 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 remain- ing width of the browser window. It is worth noting that you cannot specify different widths for elements in corresponding columns of different rows of a table. So, if the first row of a table had three elements whose widths are 100 pixels, the second row could not have one 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: An accessible timetable 122
Chapter 4: Tables 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: Saturday Sunday Morning The structure of a document and how to mark up text. Adding tables and forms to pages. Splitting pages up into windows called frames. Afternoon Linking between pages and adding color images and objects to your pages. Using CSS to style your documents and make them look attractive. 3. The next stage is to add id attributes to the elements that have content, and header attrib- utes to the elements. The value of the header attributes should correspond to the values of the id attributes, indicating which headings correspond to each cell: Saturday Sunday Morning The structure of a document and how to markup text. Adding tables and forms to pages. Splitting pages up into windows called frames Afternoon Linking between pages, and adding color images and objects to your pages. 123
Chapter 4: Tables Using CSS to style your documents and make them look attractive. 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 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. Saturday Sunday ... 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: Morning The structure of a document and how to markup text. Adding tables and forms to pages. Splitting pages up into windows called frames 124
Chapter 4: Tables The final row uses the same structure as the second row: Afternoon Linking between pages, and adding color images and objects to your pages. Using CSS to style your documents and make them look attractive. As long as you accept that each row is written out in turn, you will have no problem creating quite com- plex 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 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 element ❑ Sharing attributes between unrelated columns using the 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 simi- lar 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 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: ❑ to create a separate table header ❑ to indicate the main body of the table ❑ to create a separate table footer A table may contain several elements to indicate different “pages” or groups of data. Note that the element must appear before the element in the source document. Here you can see an example of a table that makes use of these elements (ch04_eg04.html): This is the head of the table This is the foot of the table Cell 1 Cell 2 Cell 3 Cell 4 ...more rows here containing four cells... Cell 1 Cell 2 126
Chapter 4: Tables Cell 3 Cell 4 ...more rows here containing four cells... 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 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 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 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 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” sub- section within the section “The 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 ele- ment. Possible values are top, middle, bottom, and baseline each of which is discussed more in the subsection “The valign Attribute” within the “The Element Contains Table Rows” section earlier in the chapter. Adding a to a Table To add a caption to a table, you just use the element after the opening tag and before the first row or header: Spanning columns using the colspan attribute 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 and 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 attrib- ute 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): Spanning columns using the colspan attribute   128
Chapter 4: Tables           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 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: Spanning rows using the colspan attribute   129
Chapter 4: Tables           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 con- trol the layout pages; but this technique has largely been replaced by the use of CSS to control layouts. Grouping Columns Using the Element If you are creating complex tables, you can group one or more adjacent columns together using the 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: 130
Chapter 4: Tables ... As you can see, when the element is used, it comes directly after the opening tag. The span attribute is being used to indicate how many columns the group contains, the width attribute sets the width of each column in the group (although in XHTML you should use CSS instead), and the class attribute can be used to attach further styles using CSS. In addition to the universal attributes, the element can carry the following attributes: align char charoff span valign width While this will allow basic formatting, such as background color changes, support in browsers is limited. The align Attribute (deprecated) The align attribute is used to specify the horizontal positioning of the text in cells within a element. 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 section “The Element Contains Table Rows” 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 “The char Attribute” sub- section within the section “The Element Contains Table Rows” earlier in the chapter.) The charoff Attribute The charoff attribute specifies the number of offset characters that can be displayed before the charac- ter specified as the value of the char attribute. (See the full description in the “The charoff Attribute” subsection within the “The Element Contains Table Rows” section earlier in the chapter.) The span Attribute The span attribute specifies how many columns a is supposed to stretch across. span=”5” 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” subsection within the “The Element Contains Table Rows” section earlier in the chapter. 131
Chapter 4: Tables The width Attribute The width attribute specifies the width of each cell in the column either in pixels or as a percentage of the available space. The width attribute can also take the special value 0*, which specifies that the column width should be the minimum width required to display all of the content of that column. Columns Sharing Styles Using the Element The element can be used to perform a similar role as the element, but without actually implying a structural group of columns. It can also be used to indicate that just one column needs for- matting different from the rest of the group. The elements are always empty elements, and are therefore used only to carry attributes, not content. For example, the following table would have ten columns, and the first nine, while not a group, could be formatted differently than the last column because it belongs to a separate set. ... The attributes that the element can carry are the same as for the element. Unfortunately, browser support for grouping columns is currently limited. 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 might not be able to access your pages. In order to understand how to make tables accessible, you first need to learn how tables linearize your page. How Tables Linearize To understand how a screen reader reads a table, consider the following simple table: 132
Chapter 4: Tables Column 1, Row 1 Column 2 Row 1 Column 1, Row 2 Column 2, Row 2 Figure 4-9 shows what this simple table would look like in a browser. Figure 4-9 Screen readers tend to perform linearization on a table when they read it to a visitor. This means that they start at the first row and read the cells in that row from left to right, one by one, before moving on to the next row, and so on until they have read each row in the table. The order in which the cells in Figure 4-9 would be read is therefore: ❑ Column 1 Row 1 ❑ Column 2 Row 1 ❑ Column 1 Row 2 ❑ Column 2 Row 2 Linearization of Tables Used for Layout Because tables can be used to control where elements appear on a page, web designers often used to use tables as a means for positioning text and images where they wanted them to appear. Because the designer can control properties of the table, such as width of each individual cell, it’s possible to create layouts that feature more than one column of text and to determine how wide each column should appear. Often the body of entire web pages is contained within a table. While it is the W3C’s intention that tables should be used solely for tabular data and that CSS is the preferred mechanism for positioning elements on the page, until the support for CSS positioning in browsers improves (something you learn about in Chapter 9) and until more designers learn how to make best use of CSS positioning, it is likely that tables will still be used to control the layout of web pages. You learn more about using both tables and CSS to control positioning of elements on a page in Chapters 9 and 10, but for now you should consider how pages that are written inside tables linearize for users of screen readers and that you should use a table for layout only if you can make sure that it will linearize correctly. 133
Chapter 4: Tables As mentioned earlier in the chapter, you can include markup inside a table cell, as long as the whole ele- ment is contained within that cell. This means you can even place another whole table inside a table cell, creating what’s called a nested table. If you use nested tables, when a screen reader comes across a cell containing another table, the whole of the nested table must be linearized before the reader can move onto the next cell. For example, Figure 4-10 shows a 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 one. Here is the code for this page (note that there are also some CSS rules in the source document used to style this table, ch04_eg10.html): Page heading and logo Navigation item 1 Navigation item 2 Navigation item 3 Navigation item 4 Article 1 Article 2 134
Chapter 4: Tables Article 3 Footer This example could have used the element for the first row and the element for the last row, but because the content of the table isn’t really tabular data, it is not the intended use of the element in the first place; I will rely only on the basic elements. In this example, the order in which pages are read is as follows: ❑ Page heading and logo ❑ Navigation item 1 ❑ Navigation item 2 ❑ Navigation item 3 ❑ Navigation item 4 ❑ Article 1 ❑ Article 2 ❑ Article 3 ❑ Footer Ideally you would be testing your tables in a voice browser such as one of the ones listed at www.w3.org/ WAI/References/Browsing#2. Remember that if you are using tables to control layout, you should use style sheets rather than markup to control how you want the text to appear in a table. (For example, do not use a element just to get text centered and in a bold font; use it for headings only, and do not use the element to get italicized text, as a screen reader may add inflection to the voice to show emphasis.) Linearization of Tables Used for Data If you use tables to represent data, you should try to keep your tables simple, without cells spanning rows or columns, because they can make listening to a table very complicated. Here are some general guide- lines for creating tables to hold data: ❑ Always try to use the element to indicate a table heading. If you do not like their visual representation you can override this using CSS. ❑ If you cannot use the element to indicate table headings, use the scope attribute with a value of row or col on all cells that are headings. 135
Chapter 4: Tables ❑ Always put headings in the first row and the first column. ❑ If your table is complex and contains cells that span more than one cell, then use the headers attribute on those cells, and the next cell in the linearization process to clearly indicate which heading applies to that cell. Summar y In this chapter you have seen how tables can be a powerful tool for web developers. Tables are not only used to lay out tabular data, but are often used to control layout of pages. You have seen how all 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 may be longer than a browser window or sheet of printed paper, as they help a reader relate between the content and the information in headers or footers. You can 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, 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 some guidelines for making tables more accessible to all visitors. In the next chapter, you learn about using forms to collect information from visitors. Exercises The answers to all of the exercises are in Appendix A. 1. Where should the element for a table be placed in the document, and by default where is it displayed? 2. In what order would the cells in Figure 4-11 be read out by a screen reader? Figure 4-11 136
Chapter 4: Tables 3. Create a table to hold the data shown in Figure 4-12. To give you a couple of clues, the document must be Transitional XHTML 1.0 because the width attribute is used on the cells of the first row of the table. You should also have seen examples of how the border is generated in this chapter, using another deprecated attribute, but on the element rather than the cells. Figure 4-12 137
5 Forms Almost every time you want to collect information from a visitor to your site, you need to use a form. You have probably used several different kinds of forms on different web sites, from simple search boxes, which allow you to enter keywords in order to find what you are looking for, to complex forms that allow you to order groceries or book a holiday online. Forms on the Web bear a strong resemblance to paper forms you have to fill out. On paper, there are areas to enter text, boxes to check (or tick), options to choose from, and so on. On the Web, you can create a form by combining what are known as form controls, such as text boxes (to enter text into), checkboxes (to place a tick in), select boxes and radio buttons (to choose from different options), and so on. In this chapter you learn how each of these different types of controls can be combined into a form. In this chapter, then, you learn: ❑ How to create a form using the element ❑ The different types of form control you can use to make a form — such as text input boxes, radio buttons, select boxes, and submit buttons ❑ What happens to the data a user enters ❑ How to make your forms accessible ❑ How to structure the content of your forms By the end of the chapter you will be able to create all kinds of forms to collect information from visitors to your site. What you do with the data that you collect depends upon the server your web site is hosted on. XHTML is used only to present the form to the user; it does not allow you to say what happens with that data once it has been collected. To get a better idea of what happens to the data once it has been collected from a form, you will need to look at a book on a server-side language (such as ASP.net, PHP, or JSP). See the book list at Wrox.com for books on at least some of these topics.
Chapter 5: Forms Introducing Forms Any form that you create will live inside an element called . Between the opening and closing tags, you will find the form controls (the text input boxes, drop-down boxes, checkboxes, a submit button, and so on). A element can also contain other XHTML markup just like 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 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 will usually respond to a request you have made or acknowledge an action you have taken. As an example, you might want to add the search form shown in Figure 5-1 to your page. Figure 5-1 You can see that this form contains a text box for the user to enter the keywords of what he or she is searching for, and a submit button which has been set to have the word “Search” on it. When the user clicks the Search button, the information is sent to the server. The server then processes the data and generates a new page for that user telling what pages meet the search criteria (see Figure 5-2). Figure 5-2 140