HTML 表格

在本节课,我们学习HTML 表格。

表格由 <table> 标签来定义。每个表格均有若干行(由 <tr> 标签定义),每行被分割为若干单元格(由 <td> 标签定义)。字母 td 指表格数据(table data),即数据单元格的内容。

数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

HTML 表格实例:

First NameLast NamePoints
JillSmith50
EveJackson94
JohnDoe80
AdamJohnson67

来个例子:

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>Web176教程(web176.com)</title> 
</head>
<body>

<p>
每个表格从一个 table 标签开始。 
每个表格行从 tr 标签开始。
每个表格的数据从 td 标签开始。
</p>

<h4>一列:</h4>
<table border="1">
<tr>
  <td>100</td>
</tr>
</table>

<h4>一行三列:</h4>
<table border="1">
<tr>
  <td>100</td>
  <td>200</td>
  <td>300</td>
</tr>
</table>

<h4>两行三列:</h4>
<table border="1">
<tr>
  <td>100</td>
  <td>200</td>
  <td>300</td>
</tr>
<tr>
  <td>400</td>
  <td>500</td>
  <td>600</td>
</tr>
</table>

</body>
</html>

HTML 表格和边框属性

如果不定义边框属性,表格将不显示边框。有时这很有用,但是大多数时候,我们希望显示边框。

使用边框属性来显示一个带有边框的表格:

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

HTML 表格表头

表格的表头使用 <th> 标签进行定义。

大多数浏览器会把表头显示为粗体居中的文本:

<table border="1">
    <tr>
        <th>Header 1</th>
        <th>Header 2</th>
    </tr>
    <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>

DEMO演示下:

<!DOCTYPE html>
<html>
<head>
<title>HTML 表格 | Web176教程网web176.com</title>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/angular.js/1.6.3/angular.min.js"></script>
<style>
  .box ol li {
    list-style-type: decimal;
    margin: 0 0 1em 2.5em;
    padding: 0;
  }
  .box ol li, .box ul li {
    font-size: 13px;
    word-break: break-all;
  }
  li, ol, p, ul {
    line-height: 1.5em;
  }
</style>
</head>
<body>
  <div class="box">
    
    <table border="1">
      <tr>
          <th>Header 1</th>
          <th>Header 2</th>
      </tr>
      <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>

  </div>

</body>
</html>

HTML 表格标签

标签描述
<table>定义表格
<th>定义表格的表头
<tr>定义表格的行
<td>定义表格单元
<caption>定义表格标题
<colgroup>定义表格列的组
<col>定义用于表格列的属性
<thead>定义表格的页眉
<tbody>定义表格的主体
<tfoot>定义表格的页脚

作者:terry,如若转载,请注明出处:https://www.web176.com/html4/7025.html

(0)
打赏 支付宝 支付宝 微信 微信
terryterry
上一篇 2022年10月12日 下午4:35
下一篇 2022年10月12日 下午5:24

相关推荐

发表回复

登录后才能评论