日韩av黄I国产麻豆传媒I国产91av视频在线观看I日韩一区二区三区在线看I美女国产在线I麻豆视频国产在线观看I成人黄色短片

歡迎訪問 生活随笔！

生活随笔

當前位置： 首頁 >

一天搞定CSS：表格（table）--19

發布時間：2025/7/14 53 豆豆
生活随笔 收集整理的這篇文章主要介紹了 一天搞定CSS：表格（table）--19 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

1.表格標簽

表格標簽的嵌套關系

<table><!--表格頭--><thead><!--表格行--><tr><!--表格列，【注意】這里使用的是th--><th></th></tr></thead><!--表格主體--><tbody><!--表格行--><tr><!--表格列，【注意】這里使用的是td--><td></td></tr><tr><td></td></tr></tbody><!--表格底部--><tfoot><tr><td></td></tr></tfoot> </table>

2.實例演示–課程表

border-collapse:collapse; - - -表示清除表格之間的間隙

代碼演示

<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title><style>/*1.清除表格默認樣式*/table{border-collapse: collapse;}th,td{padding: 0;}/*2.設置表格大小，以及表框顏色*/table{margin: 0 auto;width: 500px;}th,td{border: 1px solid pink;font: 20px/50px "微軟雅黑";text-align: center;}</style></head><body><!--表格標簽table 表格thead 表格頭tbody 表格主體tr 表格行th 表格頭里的單元格(默認加粗并且居中)td 表格主體里的單元格tfoot 表格底部表格的默認樣式table{border-collapse:collapse;} 單元格之間的間隙th,td{padding:0}--><table cellspacing="0"><thead><tr><th>星期一</th><th>星期二</th><th>星期三</th><th>星期四</th><th>星期五</th></tr></thead><tbody><tr><td>語文 </td><td>數學</td><td>英文</td><td>生物</td><td>化學</td></tr><tr><td>語文 </td><td>數學</td><td>英文</td><td>生物</td><td>化學</td></tr><tr><td>語文 </td><td>數學</td><td>英文</td><td>生物</td><td>化學</td></tr><tr><td>語文 </td><td>數學</td><td>英文</td><td>生物</td><td>化學</td></tr><tr><td>語文 </td><td>數學</td><td>英文</td><td>生物</td><td>化學</td></tr><tr><td>語文 </td><td>數學</td><td>英文</td><td>生物</td><td>化學</td></tr></tbody></table></body> </html>

3.表格行和列的合并

rowspan 合并行(豎著合并)
colspan 合并列(橫著合并)

效果圖：

代碼演示

<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title><style>table{border-collapse: collapse;}th,td{padding: 0;}table{margin: 0 auto;width: 500px;}th,td{border: 1px solid pink;font: 20px/50px "微軟雅黑";text-align: center;}</style></head><body><!--表格標簽 rowspan 合并行(豎著合并)colspan 合并列(橫著合并)--><table cellspacing="0"><thead><tr><th></th><th>星期一</th><th>星期二</th><th>星期三</th><th>星期四</th><th>星期五</th></tr></thead><tbody><tr><td rowspan="4"> 上午</td><td>語文 </td><td>數學</td><td>英文</td><td>生物</td><td>化學</td></tr><tr><td>語文 </td><td>數學</td><td>英文</td><td>生物</td><td>化學</td></tr><tr><td>語文 </td><td>數學</td><td>英文</td><td>生物</td><td>化學</td></tr><tr><td>語文 </td><td>數學</td><td>英文</td><td>生物</td><td>化學</td></tr><tr><!--合并行--><td rowspan="2"> 下午</td><td>語文 </td><td>數學</td><td>英文</td><td>生物</td><td>化學</td></tr><tr><td>語文 </td><td>數學</td><td>英文</td><td>生物</td><td>化學</td></tr><tr><!--合并列--><td colspan="6">夜自習</td></tr></tbody></table></body> </html>

配套小練習

鏈接地址：http://blog.csdn.net/baidu_37107022/article/details/71713520

轉載于:https://www.cnblogs.com/TCB-Java/p/6853962.html

總結

以上是生活随笔為你收集整理的一天搞定CSS：表格（table）--19的全部內容，希望文章能夠幫你解決所遇到的問題。

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