一天搞定CSS：表格（table）--19
生活随笔
收集整理的這篇文章主要介紹了
一天搞定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的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： redmine + git
- 下一篇： DFP算法（转载）