HTML表格和HTML列表

最新推荐文章于 2023-07-27 19:56:42 发布

喜欢你笑⠀

最新推荐文章于 2023-07-27 19:56:42 发布

阅读量352

点赞数 1

文章标签： html 前端

本文链接：https://blog.csdn.net/xh7531/article/details/122412682

版权

一、HTML表格

HTML 表格和 Excel 表格很相似，都包括行、列、单元格、表头等元素，但是 HTML 表格功能没有 Excel 表格那么强大，HTML 表格不支持排序、求和、方差等数学计算，它一般用来展示数据。

HTML 表格中，我们常用<table>、<tr>、<td> 及 <th> 这四个标签

<table> 表示表格，表格的所有内容需要写在 <table> 和 </table> 之间。
<tr> 表示表格的行。表格中有多少个 <tr> 标签就表示有多少行数据。
<td> 表示表格的单元格，它是真正存放表格数据的标签。注意：单元格的数据可以是文本、图片、列表、段落、表单、水平线、表格等多种形式。
<th> 表示表格的表头。<th> 其实是 <td> 单元格的一种变体，本质上还是一种单元格。<th> 一般位于第一行，充当每一列的标题。

利用这些标签，简单的写一个表格：

<table border="1" style="border-collapse: collapse;">
   <tr>
     <th>姓名</th>
     <th>年龄</th>
     <th>电话</th>
   </tr>
   <tr>
     <td>张三</td>
     <td>李四</td>
     <td>王麻子</td>
   </tr>
    <tr>
     <td>29</td>
     <td>32</td>
     <td>25</td>
     </tr>
   <tr>
      <td>123456789</td>
     <td>987654321</td>
      <td>112233445</td>
    </tr>
</table>

其中 table 中border 属性是指表格的像素大小，border-collapse 是“边框塌陷”的意思，当属性值为 collapse 时，可以使表格的双边框变为单边框。

运行结果如下：

表格的标题

HTML 允许使用 <caption> 标签来为表格设置标题，标题用来描述表格的内容。

注意：一个表格只能有一个标题，也就是说 <table> 标签中只能有一个 <caption> 标签。

<table border="1" style="border-collapse: collapse;">
  <caption>表格标题：我眼里只有学习</caption>
   <tr>
     <th>姓名</th>
     <th>年龄</th>
     <th>电话</th>
   </tr>
   <tr>
     <td>张三</td>
     <td>李四</td>
     <td>王麻子</td>
   </tr>
    <tr>
     <td>29</td>
     <td>32</td>
     <td>25</td>
     </tr>
   <tr>
      <td>123456789</td>
     <td>987654321</td>
      <td>112233445</td>
    </tr>
</table>

运行代码如下：

HTML 表格的合并单元格

在 Excel 中存在合并单元格，这 HTML 里也存在表格单元格的合并。

rowspan：表示跨行合并。在 HTML 代码中，允许我们使用 rowspan 特性来表明单元格所要跨越的行数。
colspan：表示跨列合并。同样的，在 HTML 中，允许我们使用 colspan 特性来表明单元格所要跨越的列数。

<table border="1" style="border-collapse: collapse;">
  <caption>表格标题：我眼里只有学习</caption>
   <tr>
     <th>姓名</th>
     <th>年龄</th>
     <th>电话</th>
   </tr>
   <tr>
     <td>张三</td>
     <td colspan="2">李四</td>
   </tr>
    <tr>
     <td rowspan="2">29</td>
     <td>32</td>
     <td>25</td>
     </tr>
   <tr>
      <td>123456789</td>
     <td>987654321</td>
    </tr>
</table>

运行结果如下：

二、HTML列表

HTML列表分为三种，有序列表、无序类别、定义列表。

HTML 为我们提供了三种不同形式的列表：

有序列表，使用 <ol> + <li> 标签
无序列表，使用 <ul> + <li> 标签
定义列表，使用 <dl> + <dt> + <dd> 标签

有序列表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我眼里只有学习</title>
</head>
<body>
    <p>学习</p>
    <ol>
        <li>预习</li>
        <li>听讲</li>
        <li>习题</li>
        <li>复习</li>
    </ol>
</body>
</html>

运行结果如下：

无序列表：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我眼里只有学习</title>
</head>
<body>
    <p>学习</p>
    <ul>
        <li>预习</li>
        <li>听讲</li>
        <li>习题</li>
        <li>复习</li>
    </ul>
</body>
</html>

运行结果如下：

定义列表：

<dl>
    <dt>标题1<dt>
    <dd>描述文本2<dd>
    <dt>标题2<dt>
    <dd>描述文本2<dd>
    <dt>标题3<dt>
    <dd>描述文本3<dd>
</dl>

定义列表需要使用 <dl>、<dt> 和 <dd> 标签：

<dl> 表示定义列表。
<dt> 表示定义术语，也就是我们说的标题。
<dd> 表示定义描述。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我眼里只有学习</title>
</head>
<body>
    <dl>
        <dt>学习</dt>
        <dd>学习，是指通过 阅读 、 听讲 、 思考 、 研究 、实践等途径获得 知识 和 技能 的 过程 。</dd>
        <dt>努力</dt>
        <dd>尽量的使出自己的力气来做事。 努力指用尽力气去做事情，后来指一种做事情的积极态度。 比如说努力工作，努力学习。</dd>
    </dl>
</body>
</html>

运行结果如下：

喜欢你笑⠀

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML表格和HTML列表

HTML 表格和 Excel 表格很相似，都包括行、列、单元格、表头等元素，但是 HTML 表格功能没有 Excel 表格那么强大，HTML 表格不支持排序、求和、方差等数学计算，它一般用来展示数据。HTML 表格中，我们常用<table>、<tr>、<td> 及 <th> 这四个标签<table> 表示表格，表格的所有内容需要写在 <table> 和 </table> 之间。 <tr> 表示表格的行
复制链接

扫一扫