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

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

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

一、HTML 表格

是一种用于展示和组织数据的标记语言。表格由行和列组成,每个单元格可以包含文本、图像或其他 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 来设置表格的样式,例如调整边框、背景颜色和字体样式等:

html 复制代码
<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>: 定义表格列的组。

三、边框属性

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

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

html 复制代码
<table border="1">
<tr>
<td>Row 1, cell 1</td>
<td>Row 1, cell 2</td>
</tr>
</table>

四、单元格合并

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

html 复制代码
<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属性可以用于合并单列中的多个单元格,它指定了要合并的单元格数目。

html 复制代码
<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",表示要合并两个单元格,所以它占据了两行的高度。

小结

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

相关推荐
软件技术NINI11 分钟前
html css网页制作成品——HTML+CSS盐津铺子网页设计(5页)附源码
前端·css·html
Pu_Nine_91 小时前
教程: 在网页中利用原生CSS实现3D旋转动画
css·3d·css3
mapbar_front1 小时前
面试问题—我的问题问完了,你还有什么想问我的吗?
前端·面试
quweiie2 小时前
thinkphp8+layui多图上传,带删除\排序功能
前端·javascript·layui
李鸿耀2 小时前
React 项目 SVG 图标太难管?用这套自动化方案一键搞定!
前端
闲蛋小超人笑嘻嘻2 小时前
树形结构渲染 + 选择(Vue3 + ElementPlus)
前端·javascript·vue.js
叶梅树2 小时前
从零构建A股量化交易工具:基于Qlib的全栈系统指南
前端·后端·算法
巴博尔2 小时前
uniapp的IOS中首次进入,无网络问题
前端·javascript·ios·uni-app
焚 城2 小时前
UniApp 实现双语功能
javascript·vue.js·uni-app
Asthenia04123 小时前
技术复盘:从一次UAT环境CORS故障看配置冗余的危害与最佳实践
前端