tailieunhanh - giáo trình HTML5 và CSS3 từng bước phần 6

Tham khảo tài liệu 'giáo trình html5 và css3 từng bước phần 6', công nghệ thông tin, kỹ thuật lập trình phục vụ nhu cầu học tập, nghiên cứu và làm việc hiệu quả | Merging Table Cells 221 It also comes in very handy when creating table-based page layouts which you ll learn about on page 224. To merge a cell into adjacent cells to its right use the colspan attribute and specify the number of columns to be spanned like this td colspan 3 To merge a cell into adjacent cells below it use the rowspan attribute and specify the number of rows to be spanned as shown in the following td rowspan 2 Using those two attributes you can create sophisticated table layouts. For example the following table has five columns and five rows but some of the cells span multiple columns or rows table border 1 tr td colspan 2 rowspan 2 Survey Results td td colspan 3 Age td tr tr td 12 to 25 td td 26 to 40 td td Over 40 td tr tr td rowspan 3 What is your dream vacation destination td td Disneyworld td td 25 td td 50 td td 25 td tr tr td Las Vegas td td 25 td td 50 td td 25 td tr tr td Europe td td 25 td td 50 td td 25 td tr table 222 Chapter 12 The preceding code creates a table that appears as follows Survey Results Age 12 to 25 26 to 40 Over 40 What is your dream vacation destination9 Disneyworld 25 50 0 25 Las Vegas 25 50 25 Europe 25 50 25 In this exercise you will create two simple column spans. SET UP Be sure to use the practice files provided specifically for this exercise and not earlier versions. Use the file in the practice file folder for this topic. This file is located in the Documents Microsoft Press HTML5 SBS 12Tables SpanningCells folder. Open the products file in Notepad and in Internet Explorer. 1. View in Internet Explorer. Notice that the table title wraps to multiple lines and that the note at the bottom of the table does not span all columns. Merging Table Cells 223 2. In Notepad modify the table title to span all four columns. tr td colspan 4 b Product Listing Partial b td tr 3. In the last row of the table move the cell containing the note to the first position. tr td b Note b In-stock items are .