html中关于table表格

基础实例:

代码:

<table border="1">
      <!-- 标题 -->
      <caption>
        人员管理
      </caption>
      <!-- 表头 -->
      <thead>
        <tr>
          <th>姓名</th>
          <th>性别</th>
          <th>年龄</th>
        </tr>
      </thead>
      <!-- 内容 -->
      <tbody>
        <tr>
            <td>小花</td>
            <td>女</td>
            <td>18</td>
        </tr>
        <tr>
            <td>小明</td>
            <td>男</td>
            <td>20</td>
        </tr>
        <tr>
            <td>哈哈</td>
            <td>女</td>
            <td>22</td>
        </tr>    
      </tbody>
    </table>

效果:

注:<thead></thead>和<tbody></tbody>以及<tfoot></tfoot>可以省略不写

表格中的标签:

标签 备注
<table> 定义表格
<th> 定义表格的表头
<tr> 定义表格的行
<td> 定义表格单元
<caption> 定义表格标题
<colgroup> 定义表格列的组
<col> 定义用于表格列的属性
<thead> 定义表格的页眉(表头)
<tbody> 定义表格的主体
<tfoot> 定义表格的页脚

border:边框线

一般在th/td里面加:

colspan:横向合并

rowspn:纵向合并

推荐一个表格生成器可以直接在里面生成表格然后复制代码HTML表格生成器 (rapidtables.org)

猜你喜欢

转载自blog.csdn.net/lingjiaxiaozila/article/details/126050951