Web之旅—— HTML之table(8)

作者: 葉糖糖 | 来源:发表于2017-09-15 10:36 被阅读38次

    表格通过行、列可以展示数据,可以帮助开发者进行页面布局。那么一张网页上的表格是怎么构成的?你知道么?

    一、指码为路

    这是一张简单的网页,其中编写了一个简单的table的使用方法。最简单的表格可以通过tabletrtd标签构成。

    关于表格的内容是比较简单的,遇到不懂的属性看看资料理解一下,写写一写基本上就能解决问题。

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>表格元素演示</title>
        <style type="text/css">
            table{
                border-right: 1px solid black;
                border-bottom: 1px solid black;
            }
            td,th{
                border-left: solid 1px black;
                border-top:solid 1px black;
            }
    
        </style>
    </head>
    <body>
    <table cellpadding="0" border="0" cellspacing="0">
        <!--表格标题-->
        <caption>2017开普勒大学新生入学信息表</caption>
        <!--表头字段-->
        <thead>
            <tr>
                <th>序列</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>专业</th>
                <th>备注</th>
            </tr>
        </thead>
        <!--表体内容-->
        <tbody>
              <tr>
                  <td>1</td>
                  <td>sugarYe</td>
                  <td>10</td>
                  <td>古典中文</td>
                  <td>兼职写代码</td>
              </tr>
              <tr>
                  <td>2</td>
                  <td>洛书</td>
                  <td>12</td>
                  <td>中文</td>
                  <td>博士在读</td>
              </tr>
              <tr>
                  <td>3</td>
                  <td>Tina</td>
                  <td>15</td>
                  <td>计算机信息管理</td>
                  <td>天才程序员</td>
              </tr>
        </tbody>
        <!--表尾-->
        <tfoot>
          <tr>
              <th>意见</th>
              <th colspan="4">厉害了!同意入学!</th>
          </tr>
        </tfoot>
    </table>
    </body>
    </html>
    
    二、实际效果

    上面代码最终的运行效果如下图:

    表格效果演示

    怎么样,是不是特别简单?加油小伙伴们!

    相关文章

      网友评论

        本文标题:Web之旅—— HTML之table(8)

        本文链接:https://www.haomeiwen.com/subject/gekssxtx.html