Web之旅—— HTML之table（8）

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

Web之旅—— HTML之table（8）
HTML Tables
前端学习资料
HTML之表格 · Table
Html之table表格
PHP编程实战15-9
2018-07-14 layUI 2.x
Web之旅—— HTML基础（7）
好程序员分享Web前端培训知识之HTML
HTML Table

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

一、指码为路

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

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

<!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>