19-表单标签

77 阅读1分钟

表格标签

  • 在页面中用于绘制表格,也可以用作页面布局
  <table>
        <!-- 行标签 -->
        <!-- 四行三列表格 -->
        <tr>
            <!-- 单元格标签 -->
            <th>学号</th>
            <th>姓名</th>
            <th>性别</th>
        </tr>
        <tbody>
            <tr>
                <!-- 单元格标签 -->
                <td>1</td>
                <td>小王</td>
                <td></td>
            </tr>
            <tr>
                <!-- 单元格标签 -->
                <td>2</td>
                <td>小红</td>
                <td></td>
            </tr>
            <tr>
                <!-- 单元格标签 -->
                <td>3</td>
                <td>小张</td>
                <td></td>
            </tr>
        </tbody>
    </table>
  • table:表示表格,一个table表示一个表格
  • tr:表示行标签,一个tr表示一行
  • td:表示单元格,一个td就是一列
  • th:特殊的单元格标签,通常用于表头,文字有居中和加粗效果
  • thead:h5新增标签,表示表格头部
  • tbody:h5新增标签,表示表格内容
  • tfoot:h5新增标签,表示表格尾部

单元格合并

  • rowspan:跨行合并
  • colspan:跨列合并

单元格样式调整

  • border:边框设置
  • border-spacing:单元格和单元格之间的距离
  • border-collapse: collapse;:边框合成一条