當前位置：首頁 > 前端技术 > CSS >内容正文

CSS

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

發布時間：2025/7/14 CSS 31 豆豆

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

1.表格標簽

表格標簽的嵌套關系

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 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><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的全部內容，希望文章能夠幫你解決所遇到的問題。

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