由于瀏覽器兼容問題，、 以及 很少被使用，

所以我們將課程表依然使用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>

頁面效果如下圖所示：

總結

以上是生活随笔為你收集整理的table合并单元格_制作课程表3——合并单元格的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。