Section 5: HTML Tables
   Lesson 5-3: Join & Split - Spanning Rows & Columns

th

th

Practice:

1. Add a pair of row tags tr /tr just before the first row of the table (just after the caption). Use the same background color as in the other header row (#99cccc).
2. Add four sets of table header tags th /th to the new row.
3. In the first header cell type: "Regions" (without the quotation marks)
      In the second cell, type: "East Asia"
      In the third cell, type: "Other Regions"
      The fourth cell should be blank. However, some browsers don't know what to do with a blank cell, so you must put something in the cell. Just put something there which cannot be seen on the page. Enter a non-breaking space code [ ] or a line break tag br.
4. We want the second cell, "East Asia", to span three columns, so add the attribute colspan="3" to the th tag of the second cell. Remember, the attribute is put inside the opening tag.
5. The "Other Regions" header cell should span two columns, "U.S.A." and "Other". Add the attribute colspan="2" to the th tag of the third cell.
6. Save your file and take a look at it in your browser. There is still one small problem we need to correct. What do you think it might be?
7. The problem is the one blank cell at the top of the last column. It would look better if it were joined with the [Total] cell below it. Here's what to do: First, move all the information from the [Total] cell to the cell above it, give the th tag a rowspan="2" attribute, and then delete the lower [Total] cell. Because the new upper cell will now span two rows, the lower [Total] cell itself must be removed. You must remove the whole tag pair, not just the data inside of it.
8. The data in this table come from an Okinawa Prefectural Government publication, and proper credit must be given. Immediately below the table, add the following information:
          Source: Okinawa Pref. Govt., Kankô Yôran
   Reduce the font size by one point, and align it to the right. Finally, because the book Kankô Yôran is a Japanese language publication, put it in italics. To do this you must create a new table right below this table. The new table must have the same width as this table. The new table has only one cell, and it has no border or background color.
9. Save your file and check it in your browser.

div align="center" table cellspacing="1" cellpadding="4" border="3" captionbInternational Tourist Arrivals in Okinawa/b/caption tr bgcolor="#99cccc" thRegion:/th th colspan="3"East Asia/th th colspan="2"Other Regions/th th width="70" rowspan="2"Total/th /tr tr bgcolor="#99cccc" th width="70"Country:/th th width="70"Taiwan/th th width="70"South Korea/th th width="70"Philippines/th th width="70"U.S.A./th th width="70"Other/th th width="70"Total/th     Delete this tag /tr tr align="right" td bgcolor="#ccffff"1995/td td100,327/td td3,688/td td1,575/td td9,006/td td4,099/td td118,695/td /tr tr align="right" td bgcolor="#ccffff"1996/td td110,227/td td4,725/td td1,295/td td6,126/td td2,856/td td125,229/td /tr tr align="right" td bgcolor="#ccffff"1997/td td142,376/td td5,393/td td1,512/td td6,294/td td4,077/td td159,652/td /tr tr align="right" td bgcolor="#ccffff"1998/td td103,720/td td2,450/td td1,658/td td8,790/td td3,749/td td120,367/td /tr /table table width="584" tr td align="right" font size="-1"Source: Okinawa Pref. Govt., iKankô Yôran/i, 1999/font/td /tr /table /div

Review:

• Cells next to each other in a row can be joined using the colspan="n" attribute of a th or td tag, where "n" is the number of columns..
• Cells next to each other in a column can be joined using the rowspan="n" attribute of a th or td tag, where "n" is the number of rows.

you have now learned all of the basics of HTML tables. This tutorial only covers the basics, but using what you have just learned in this tutorial, you can do quite a few things with tables.    Tables can get very complicated. Tables are often used to layout text in columns. (These columns were created using a table.) Many Internet websites layout all of their pages using tables.    There are a number of things which you can do with tables that work in one browser, but not in another.

Since you don't want to offend any of your readers, you should always try to create pages that work in all browsers. Avoid using tags or attributes that work in only one browser.    It is easy to make coding mistakes with tables, and you probably had some troubles as you created the table in this lesson. You must be getting tired by now, so why not take a cafe latte break before going on to the quiz for this section.