web前端结构_HTML入门(四)_表格、列表、表单

HTML表格、列表、表单（四）

1. 表格

1.1 表格的相关标签 table

• 表格标签 < table >< /table >
• 表格的作用：表格不是用来布局页面(列表)的，是用来展示数据的
• 表头区域标签 < thead >< /thead >
• 表格的主体 < tbody >< /tbody >
• 行标签 < tr >< /tr >
• 头 单格标签 < th >< /th >
  头单格标签中的文字自动居中、加粗
• 普通 单格标签 < td >< /td >
  普通单格标签中的文字不变

    <table>
        <thead>
            <tr>
                <th>a</th>
                <th>aa</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>b</td>
                <td>bb</td>
            </tr>
        </tbody> 
    </table>

• 示例图片
  

1.2 表格属性

• Align 对齐方式可取值 left（左对齐） center（居中） right（右对齐）
• Border 表格边框粗细
• Cellpadding 规定单元格和内容之间的空白
• Cellspacing规定单元格之间的空白
• Width 表格宽度
• Height 表格高度
• 示例代码：属性参数可以自己根据喜好调整

    <table align="center" border="1" 
    cellpadding=0 cellspacing=0 width=300 height=40>
        <thead>
            <tr>
                <th>a</th>
                <th>aa</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>b</td>
                <td>bb</td>
            </tr>
        </tbody> 
    </table>

• 示例图片：
  

1.3 合并单元格

1.3.1 跨行合并 rowspan

• 跨行合并（合并同一列的两个单元格）设置 td 的属性rowspan=”2”
• 上侧单元格为目标单元格
• 删除一个单元格 在想要删除的行中删除一个 td 标签