课堂随笔15

一、表格布局 table（传统布局）

1. 表格全套标签结构

html
  
<table>       <!-- 表格整体容器 -->
  <caption>表格标题</caption>
  <thead>      <!-- 表头区域 -->
    <tr>      <!-- table row 行 -->
      <th>表头单元格</th> <!-- 加粗居中表头 -->
    </tr>
  </thead>
  <tbody>      <!-- 表格主体内容区 -->
    <tr>
      <td>普通单元格</td> <!-- table data 单元格 -->
    </tr>
  </tbody>
  <tfoot>      <!-- 表格底部汇总区 -->
  </tfoot>
</table>

2. 表格常用属性（写在table标签上）

1```
.  border="1" ：边框粗细
2.  width  /  height ：表格宽高
3.  cellpadding ：单元格内边距（文字与边框距离）
4.  cellspacing ：单元格之间的间距
5.  align ：表格整体对齐 left/center/right

3. 单元格合并（重点考点）
 
- colspan：跨列合并（横向合并）
 colspan="2"  占据2列宽度
- rowspan：跨行合并（纵向合并）
 rowspan="3"  占据3行高度
 
合并口诀：上删下留，左删右留
例：向右合并就删掉右边单元格，向下合并删掉下边单元格。
 
4. CSS表格样式常用设置
 
css
  

table {
border-collapse: collapse; /* 边框合并，消除缝隙 /
text-align: center; / 单元格文字水平居中 /
}
td,th {
border: 1px solid #ccc;
padding: 8px; / 单元格内边距 */
}