学习不止眼前的教程与笔记 还需实践与创新

搜索

首页>>网站建设>>HTML>>基础教程>>

HTML基础教程(十一) 表格

发布时间:2019-12-18点击:

    HTML表格

    在HTML中如果想要创建表格,我们有专门的完善的表格标签来实现,那就是table标签,这是一个闭合标签。

    在HTML表格中,会将表格分为若干行,在把每行分为若干单元格,也就是列,然后单元格内就可以存放我们操作EXCEL时所需要存放的数据,也可以是图片、列表、段落、表单、水平线一个嵌套表格等。

    一、定义语法

    <table border="1">
        <tr>
            <td>row 1, cell 1</td>
            <td>row 1, cell 2</td>
        </tr>
        <tr>
            <td>row 2, cell 1</td>
            <td>row 2, cell 2</td>
        </tr>
    </table>

    在HTML表格中最大的闭合标签就是<table>,其所有的子标签需要在<table>标签中。

    1、其中<tr>标签定义的是行,<td>定义的是列,也就是单元格;

    2、上述代码中有两个<tr>闭合标签,意思就是说定义了一个表格有两行;在<tr>标签中有两个<td>标签,也就是说一行有两个单元格.

    显示如下:

    row1,cell1
    row1,cell2
    row2,cell1
    row2,cell2

    3、在HTML表格中,每行可以单独定义有多少个单元格,它与其他行互不干涉。

    二、表格其他属性

    标签
    作用
    <table>
    定义表格
    <tr>
    定义表格的行
    <td>
    定义表格的单元格
    <th>
    定义表格的表头(文本加粗居中),与<td>用法相同
    <caption>
    定义表格标题
    <colgroup>
    定义表格列的组
    <col>
    定义表格列的属性
    <thead>
    定义表格的页眉
    <tbody>
    定义表格的主体
    <tfoot>
    定义表格的页脚

    三、实例应用

    代码:

    <html>
    <head>
    <meta charset='utf-8'>
    <title>HTML表格实例应用</title>
    </head>
    <body>
    <table border="1">
      <thead>
        <tr>
          <th>名字</th><th>年纪</th><th>工作</th>
        </tr>
      </thead>
      <tfoot>
        <tr>
          <td>张三</td><td>18</td><td>教师</td>
        </tr>
      </tfoot>
      <tbody>
        <tr>
          <td>李四</td><td>26</td><td>工人</td>
        </tr>
        <tr>
          <td>王五</td> <td>30</td><td>律师</td>
        </tr>
      </tbody>
    </table>
    </body>
    </html>

    显示如下:

    小伙伴们动手试试吧~

赞一个(0)     踩一个(0)    

相关链接

搜索