HTML table element-HTML Tutorial-php.cn

Home

Web Front-end

HTML Tutorial

HTML table element

高洛峰

Nov 02, 2016 am 10:11 AM

html sheet

HTML元素分类-表格元素

：定义表格。

：定义表格的表头。该元素用于组合表格的表头内容。

：用于对表格中的主体内容进行分组。

：用于对表格中的表注（页脚）内容进行分组。

：定义表格中的行。

：组合表格中的列，对其进行格式化。只能在 table 元素中使用。

：为表格中一个或多个列定义属性值。只能在 table 或 colgroup 元素中使用 col元素。

<table border="1">
  <colgroup>
    <col span="2" style="background-color:red">
    <col style="background-color:yellow">
  </colgroup>
  <tr>
    <th>ISBN</th>
    <th>Title</th>
    <th>Price</th>
  </tr>
  <tr>
    <td>3476896</td>
    <td>My first HTML</td>
    <td>$53</td>
  </tr>
</table>

Copy after login

　　　这里需要注意的是，在H5中，col元素、colgroup元素仅支持属性span且必须被嵌套在table元素内所有的子元素之前。

：定义表格标题。caption 元素紧随 table 元素之后，每个表格只能定义一个标题，标题居中于表格之上。
<table border="1"> <caption>Monthly savings</caption> <tr> <th>Month</th> <th>Savings</th> </tr> <tr> <td>January</td> <td>$100</td> </tr> </table>
Copy after login
：定义表格内的表头单元格。	：定义表格中的标准单元格。 <table border="1"> <thead> <tr> <th>Month</th> <th>Savings</th> </tr> </thead> <tbody> <tr> <td>January</td> <td>$100</td> </tr> <tr> <td>February</td> <td>$80</td> </tr> </tbody> <tfoot> <tr> <td>Sum</td> <td>$180</td> </tr> </tfoot> </table> Copy after login

：定义表格标题。caption 元素紧随 table 元素之后，每个表格只能定义一个标题，标题居中于表格之上。

<table border="1">
  <caption>Monthly savings</caption>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table>

Copy after login

：定义表格内的表头单元格。

：定义表格中的标准单元格。

<table border="1">
    <thead>
        <tr>
            <th>Month</th>
            <th>Savings</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>January</td>
            <td>$100</td>
        </tr>
        <tr>
            <td>February</td>
            <td>$80</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>Sum</td>
            <td>$180</td>
        </tr>
    </tfoot>
</table>

Copy after login

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn