美文网首页
表格-table

表格-table

作者: 霜之朝 | 来源:发表于2017-11-09 14:36 被阅读0次

表格-table
实际代码如下:

  <table border="1">
    <caption>表格标题</caption>
    <thead>
      <tr>
        <th>title1</th>
        <th>title1</th>
        <th>title1</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>content1-1</td>
        <td>content1-2</td>
        <td>content1-3</td>
      </tr>
      <tr>
        <td>content2-1</td>
        <td>content2-2</td>
        <td>content2-3</td>
      </tr>
    </tbody>
  </table>

显示效果:


table.jpeg

在HTML中使用表格,其标签名为table,它有一个属性名border,用于设置表格线条的粗细,这里设置了1
<caption>:顾名思义,这个标签的意思是指表格的标题,且该元素必须是table下的第一个元素。
<thead>:表格里通常会有具体的字段信息,例如姓名,年龄,性别等,而这些字段信息可以放在该标签中。
<tbody>:表格中具体的内容信息,即对应字段的内容信息则放在这个标签中。
<tr>:表示表格的一行,使用一对<tr></tr>表示一行,多个表示多行。
<th>和<td>:表示表格的一列,要嵌套在<tr>中使用。多对使用表示多列。而<th><td>的区别在于<th>是在<thead>下的<tr>中的,而<td>只要是在<tr>下就能其作用。

<td>中有一个属性colspan,表示合并列,它的值是一个数值,表示合并几列。
修改上述代码的最后一对<tr>

<tr>
     <td>content2-1</td>
     <td colspan="2">content2-2</td>
</tr>

效果如下:


table-colspan.jpeg

相关文章

  • table表格

    table标签:表格 双标签 表格级(display:table) table有border width heig...

  • table布局方式与div+css布局的区别细讲

    表格布局(table): table表格拆分合并(colspan、rowspan) colspan横向合并表格必须...

  • html和css进阶二

    一、table标签 table的构成table表示表格开始表格结束tr表示表格中的行标签,一个表格中有多少行就应该...

  • CSS基本样式之表格

    1. 表格 给表格添加table-bordered(表格应用边框和斑马条纹) 给表格添加table-striped...

  • Bootstrap学习笔记(3)--表格\表单\图片

    Bootstrap表格 表格类: .table只会在表行之间增加横线; .table-striped会在表格行...

  • 标签(二)

    1.表格 table:表格 tr:table row,行 td: table dock,单元格 嵌套关系为tabl...

  • 表格 - Tables

    常规表格 给 标签设置 .table 类 条纹表格 增加设置 table-striped 类 带边框表格 增加...

  • Tailwind Table

    表格样式工具类 表格布局table layout CSS中table-layout属性用于设置表格布局的类型,即用...

  • HTML中的<table>

    table的作用 : 定义HTML文档中的表格 table的元素 标签给表格设置标题 标签定义表格的页头 定义表格...

  • HTML入门3(0717)

    07-17 1.表格