编程笔记 html5&css&js 016 HTML表格

简介: 编程笔记 html5&css&js 016 HTML表格

表格是一种常用的文档格式。学习或办公过程中也常常使用表格。有专用的电子表格软件,如EXCEL、WPS表格等。表格也经常与文字混合在文章中使用。网页中也是一样,需要表格这种形式。

一、HTML 表格

是一种用于展示和组织数据的标记语言。表格由行和列组成,每个单元格可以包含文本、图像或其他 HTML 元素。下面是一个简单的 HTML 表格示例:

<table>
  <tr>
    <th>姓名</th>
    <th>年龄</th>
    <th>性别</th>
  </tr>
  <tr>
    <td>张三</td>
    <td>25</td>
    <td>男</td>
  </tr>
  <tr>
    <td>李四</td>
    <td>30</td>
    <td>女</td>
  </tr>
</table>

在这个例子中,<table> 元素表示一个表格。<tr> 元素表示表格中的一行。<th> 元素表示表头单元格,用于显示列的标题。<td> 元素表示数据单元格,用于显示实际的数据。

这个表格有三个列:姓名、年龄和性别,以及两行数据。可以使用 CSS 来设置表格的样式,例如调整边框、背景颜色和字体样式等:

<style>
  table {
    border-collapse: collapse;
    width: 100%;
  }
  th, td {
    border: 1px solid black;
    padding: 8px;
    text-align: left;
  }
  th {
    background-color: #f2f2f2;
  }
</style>

通过在 <style> 标签中添加 CSS 样式,可以实现表格的自定义样式。

这只是一个简单的表格示例,HTML 表格还有许多其他的功能和属性,例如合并单元格、设置表格宽度和高度等。可以在不同的教程和资源中深入学习更多关于 HTML 表格的知识。

二、HTML 表格标签

以下是一些常用的HTML表格标签及其用法:

  1. <table>:定义表格,包含所有的表格内容。
  2. <tr>:定义表格行,包含表格中的一行数据。
  3. <td>:定义表格数据单元格,包含表格中的一个数据项。
  4. <th>:定义表格标题单元格,用于在表头中显示标题。
  5. <caption>: 定义表格标题
  6. <thead>:定义表格的表头部分,通常包含表头行。
  7. <tbody>:定义表格的主体部分,包含行和数据单元格。
  8. <tfoot>:定义表格的页脚部分,通常包含总结性信息。
  9. <col>: 定义用于表格列的属性。
  10. <colgroup>: 定义表格列的组。

三、边框属性

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

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

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

四、单元格合并

在HTML中,可以使用colspanrowspan属性来合并单元格。

colspan属性可以用于合并单行中的多个单元格,它指定了要合并的单元格数目。

<table>
  <tr>
    <td colspan="2">单元格1</td>
    <td>单元格2</td>
  </tr>
  <tr>
    <td>单元格3</td>
    <td>单元格4</td>
    <td>单元格5</td>
  </tr>
</table>

上面的示例中,第一行的第一个单元格使用了colspan="2",表示要合并两个单元格,所以它占据了两列的宽度。rowspan属性可以用于合并单列中的多个单元格,它指定了要合并的单元格数目。

<table>
  <tr>
    <td rowspan="2">单元格1</td>
    <td>单元格2</td>
    <td>单元格3</td>
  </tr>
  <tr>
    <td>单元格4</td>
    <td>单元格5</td>
  </tr>
</table>

上面的示例中,第一列的第一个单元格使用了rowspan="2",表示要合并两个单元格,所以它占据了两行的高度。

五、操作

<!DOCTYPE html>
<html lang="zh-cn">
    <head>
        <title>编程笔记 html5&css&js HTML表格</title>
        <meta charset="utf-8" />
        <style>
            body {
                color: cyan;
                background-color: teal;
            }
        </style>
    </head>
    <body>
        <h2 align="center">含有表头的表格</h2>
        <table align="center" width="700" border="1px">
            <tr>
                <th>姓</th>
                <th>名</th>
            </tr>
            <tr>
                <td>John</td>
                <td>Doe</td>
            </tr>
            <tr>
                <td>Jane</td>
                <td>Doe</td>
            </tr>
        </table>
        <h2 align="center">含有表头、表尾和表格主体的表格</h2>
        <table align="center" width="700" border="1px">
            <thead>
                <tr>
                    <th>表头内容 1</th>
                    <th>表头内容 2</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>表格主体内容 1</td>
                    <td>表格主体内容 2</td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <td>表尾内容 1</td>
                    <td>表尾内容 2</td>
                </tr>
            </tfoot>
        </table>
        <h2 align="center">有列组的表格</h2>
        <table align="center" width="700" border="1px">
            <colgroup span="4"></colgroup>
            <tr>
                <th>国家</th>
                <th>首都</th>
                <th>人口数量</th>
                <th>语言</th>
            </tr>
            <tr>
                <td>美国</td>
                <td>华盛顿</td>
                <td>3.09 亿</td>
                <td>英语</td>
            </tr>
            <tr>
                <td>瑞典</td>
                <td>斯德哥尔摩</td>
                <td>900 万</td>
                <td>瑞典语</td>
            </tr>
        </table>
        <h2 align="center">有列组和列的表格</h2>
        <table align="center" width="700" border="1px">
            <colgroup>
                <col style="background-color: #0f0" />
                <col span="2" />
            </colgroup>
            <tr>
                <th>青柠</th>
                <th>柠檬</th>
                <th>橘子</th>
            </tr>
            <tr>
                <td>绿色</td>
                <td>黄色</td>
                <td>橙色</td>
            </tr>
        </table>
        <h2 align="center">有标题的简单表格</h2>
        <table align="center" width="700" border="1px">
            <caption>美妙的标题</caption>
            <tr>
                <td>美妙的数据</td>
            </tr>
        </table>
    </body>
</html>

小结

在实际 的编程中,很多是需要动态生成表格。这前要熟练掌握静态表格的使用。

相关文章
|
23天前
|
JavaScript 计算机视觉
纯js实现人脸识别眨眨眼张张嘴案例——index.html
纯js实现人脸识别眨眨眼张张嘴案例——index.html
12 0
JS+CSS随机点名详细介绍复制可用(可自己添加人名)
JS+CSS随机点名详细介绍复制可用(可自己添加人名)
|
1月前
|
前端开发 JavaScript
从0到1:用HTML、CSS和JavaScript构建一个简单的待办事项列表
从0到1:用HTML、CSS和JavaScript构建一个简单的待办事项列表
20 0
|
1月前
|
前端开发 JavaScript UED
前端开发的魔法:CSS动画与JavaScript的完美结合
本文将探讨如何利用CSS动画和JavaScript的结合,为前端页面增添生动的效果。我们将通过实例展示如何使用这两种技术为网页元素创建吸引人的动画效果,并讨论它们的优缺点和适用场景。
27 0
|
1月前
|
缓存 自然语言处理 前端开发
JS/CSS体积减少了67%,我们是如何做到的?
JS/CSS体积减少了67%,我们是如何做到的?
18 1
|
1月前
|
JavaScript 前端开发 API
JavaScript实现表格排序
JavaScript实现表格排序
11 0
|
1月前
|
JavaScript 前端开发
HTML JS 应用
HTML JS 应用
18 3
|
1月前
|
JavaScript 前端开发
编程笔记 html5&css&js 079 JavaScript 循环语句
编程笔记 html5&css&js 079 JavaScript 循环语句
|
1月前
|
JavaScript 前端开发 开发者
编程笔记 html5&css&js 078 JavaScript 条件判断语句
条件判断语句是首先要接触的语句。通过条件判断来执行不同的代码块。
|
1月前
|
JavaScript 前端开发 编译器
编程笔记 html5&css&js 077 Javascript 关键字
编程笔记 html5&css&js 077 Javascript 关键字