由于瀏覽器兼容問題,、 以及 很少被使用,
所以我們將課程表依然使用tr、td元素,結合樣式實現出前面案例中效果
原來代碼:
課程1
課程2
課程3
課程4
課程5
課程1
課程2
課程3
課程4
課程5
課程1
課程2
課程3
課程4
課程5
課程1
課程2
課程3
課程4
課程5
課程1
課程2
課程3
課程4
課程5
原來表格效果:
為了實現課程表2效果,需要在前面增加一個“課程表”標題,和增加一行星期內容,
課程表
星期一
星期二
星期三
星期四
星期五
課程1
課程2
課程3
課程4
課程5
……
因為課程表前面還需要增加一列,顯示上午、下午和晚上,
所以在每個tr后面再增加一個單元格td,
<table> <caption>課程表caption> <tr> <td>td> <td>星期一td> <td>星期二td> <td>星期三td> <td>星期四td> <td>星期五td> tr> <tr> <td>上午td> <td>課程1td> <td>課程2td> <td>課程3td> <td>課程4td> <td>課程5td> tr> <tr> <td>td> <td>課程1td> <td>課程2td> <td>課程3td> <td>課程4td> <td>課程5td> tr> <tr> <td>下午td> <td>課程1td> <td>課程2td> <td>課程3td> <td>課程4td> <td>課程5td> tr> <tr> <td>td> <td>課程1td> <td>課程2td> <td>課程3td> <td>課程4td> <td>課程5td> tr> <tr> <td>晚上td> <td>課程1td> <td>課程2td> <td>課程3td> <td>課程4td> <td>課程5td> tr> table>
頁面效果圖如下:
此時需要合并單元格,
“上午”和下面的單元格合并,需設置rowspan=""屬性和值,這表示該單元格(向下)跨越幾行的意思,此處跨越兩行,所以rowspan="2",同時,被下面合并的單元格td元素要去掉,如下面代碼:
(如果該單元格向右跨列合并,則用colspan="")
<table> <caption>課程表caption> <tr> <td>td> <td>星期一td> <td>星期二td> <td>星期三td> <td>星期四td> <td>星期五td> tr> <tr> <td rowspan="2">上午td> <td>課程1td> <td>課程2td> <td>課程3td> <td>課程4td> <td>課程5td> tr> <tr> <td>課程1td> <td>課程2td> <td>課程3td> <td>課程4td> <td>課程5td> tr> <tr> <td rowspan="2">下午td> <td>課程1td> <td>課程2td> <td>課程3td> <td>課程4td> <td>課程5td> tr> <tr> <td>課程1td> <td>課程2td> <td>課程3td> <td>課程4td> <td>課程5td> tr> <tr> <td>晚上td> <td>課程1td> <td>課程2td> <td>課程3td> <td>課程4td> <td>課程5td> tr> table>
頁面效果如下圖所示: