Web前端开发笔记——第二章 HTML语言 第七节 表格标签

简介: Web前端开发笔记——第二章 HTML语言 第七节 表格标签

一、表格标签的定义


在html中,表格标签表示为<table></table>,其中的每行用<tr></tr>标签表示,在表格中的每一行都由若干个单元格组成,表示为<td><td>,它代表该单元格的数据,可以为文本、图片、列表等等,且可以在其中嵌套表格。

例如,在HBuilder X中,下列html代码,设定一个三行四列的表格:

<!DOCTYPE html>
<html>
  <head>
  <meta charset="utf-8">
  <title></title>
  </head>
  <body>
  <table>
    <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
    </tr>
    <tr>
    <td>5</td>
    <td>6</td>
    <td>7</td>
    <td>8</td>
    </tr>
    <tr>
    <td>9</td>
    <td>10</td>
    <td>11</td>
    <td>12</td>
    </tr>
  </table>
  </body>
</html>

运行结果如下:

1667056838446.jpg


二、表格标签的属性


(一)边框属性


上图创建的表格是没有属性的,它表示的是无边框的表格,其table标签属性border="0"或默认为无边框,即若不定义表格边框属性,表格不会显示边框。

例如,在HBuilder X中,下列html代码,设定一个三行四列的表格,设置其边框大小,其属性为border=“1”:

<!DOCTYPE html>
<html>
  <head>
  <meta charset="utf-8">
  <title></title>
  </head>
  <body>
  <table border="1">
    <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
    </tr>
    <tr>
    <td>5</td>
    <td>6</td>
    <td>7</td>
    <td>8</td>
    </tr>
    <tr>
    <td>9</td>
    <td>10</td>
    <td>11</td>
    <td>12</td>
    </tr>
  </table>
  </body>
</html>

运行结果如下,我们其实可以发现有两层边框,最外层的是表格的边框,而内层的是单元格的边框:

1667056877766.jpg


(二)单元格属性


通过设置table标签的cellspacing属性和cellpadding属性,可以设置表格中各单元格之间的距离和表格中各单元格的内容与其边框之间的距离,如下:

<table border="" cellspacing="" cellpadding="">
  <tr><th>Header</th></tr>
  <tr><td>Data</td></tr>
</table>

例如,在HBuilder X中,下列html代码,设定一个两行三列的表格,其各单元格之间的距离为0,即cellspacing=“0”,且单元格的内容与其边框之间的距离为25,即cellpadding=“25”:

<!DOCTYPE html>
<html>
  <head>
  <meta charset="utf-8">
  <title></title>
  </head>
  <body>
  <table border="1" cellspacing="0" cellpadding="25">
    <tr>
    <th>1</th>
    <td>星期一</td>
    <td>星期二</td>
    </tr>
    <tr>
    <th>2</th>
    <td>语文</td>
    <td>数学</td>
    </tr>
  </table>
  </body>
</html>

运行结果如下:

1667056986989.jpg


三、表格标签的表头


可以将表格标签的第一行或第一列设置为表头,通过<th></th>标签设置。

例如,在HBuilder X中,下列html代码,制作一个简单的课程表,第一行tr标签内有三个th表头标签,表示课程表的“星期”:

<!DOCTYPE html>
<html>
  <head>
  <meta charset="utf-8">
  <title></title>
  </head>
  <body>
  <table border="1">
    <tr>
    <th></th>
    <th>星期一</th>
    <th>星期二</th>
    <th>星期三</th>
    </tr>
    <tr>
    <td>1</td>
    <td>语文</td>
    <td>数学</td>
    <td>物理</td>
    </tr>
    <tr>
    <td>2</td>
    <td>英语</td>
    <td>化学</td>
    <td>数学</td>
    </tr>
    <tr>
    <td>3</td>
    <td>生物</td>
    <td>英语</td>
    <td>语文</td>
    </tr>
  </table>
  </body>
</html>

运行结果如下:

1667057039218.jpg


表头属性


可以对表头添加colspan属性和rowspan属性,对th表头的下面的单元格进行分列和分行。

例如,在HBuilder X中,下列html代码,对列分为两列,colspan=“2”:

<!DOCTYPE html>
<html>
  <head>
  <meta charset="utf-8">
  <title></title>
  </head>
  <body>
  <table border="1">
    <tr>
    <th></th>
    <th colspan="2">星期一</th>
    </tr>
    <tr>
    <td>上午</td>
    <td>1班</td>
    <td>2班</td>
    </tr>
    <tr>
    <td>下午</td>
    <td>3班</td>
    <td>2班</td>
    </tr>
  </table>
  </body>
</html>

运行结果如下:

1667057101621.jpg

例如,在HBuilder X中,下列html代码,对行进行分为两行,rowspan=“2”:

<!DOCTYPE html>
<html>
  <head>
  <meta charset="utf-8">
  <title></title>
  </head>
  <body>
  <table border="1">
    <tr>
    <th rowspan="2">上午</th>
    <td>1班</td>
    </tr>
    <tr>
    <td>2班</td>
    </tr>
    <tr>
    <th rowspan="2">下午</th>
    <td>2班</td>
    </tr>
    <tr>
    <td>3班</td>
    </tr>
  </table>
  </body>
</html>

运行结果如下:

1667057142264.jpg


四、表格标签的标题


可以通过在table标签中定义<caption></caption>标签,对表格添上标题,即在表格的上方添加上一个标题。

例如,在HBuilder X中,下列html代码,在表格上添加一个名称为“课程表”的表格标题:

<!DOCTYPE html>
<html>
  <head>
  <meta charset="utf-8">
  <title></title>
  </head>
  <body>
  <table border="1">
    <caption>课程表</caption>
    <tr>
    <th></th>
    <th>星期一</th>
    <th>星期二</th>
    <th>星期三</th>
    </tr>
    <tr>
    <td>1</td>
    <td>语文</td>
    <td>数学</td>
    <td>物理</td>
    </tr>
    <tr>
    <td>2</td>
    <td>英语</td>
    <td>化学</td>
    <td>数学</td>
    </tr>
    <tr>
    <td>3</td>
    <td>生物</td>
    <td>英语</td>
    <td>语文</td>
    </tr>
  </table>
  </body>
</html>

运行结果如下:

1667057325356.jpg


五、表格标签的嵌套


可以在表格内添加图片、文字、段落等等,也可以嵌套表格。

例如,在HBuilder X中,下列html代码:

<!DOCTYPE html>
<html>
  <head>
  <meta charset="utf-8">
  <title></title>
  </head>
  <body>
  <table border="1">
    <tr>
    <th rowspan="2">1</th>
    <td>
      <p>这是一个段落!</p>
    </td>
    </tr>
    <tr>
    <td>
      <p>这是一个图片:</p>
      <img src="../image/酒柜.png" alt="酒柜" width="100" height="80">
    </td>
    </tr>
    <tr>
    <th rowspan="2">2</th>
    <td>
      <ol>
      <li>星期一</li>
      <li>星期二</li>
      <li>星期三</li>
      </ol>
    </td>
    </tr>
    <tr>
    <td>
      <table>
      <tr>
        <table border="1">
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        </table>
      </tr>
    </td>
    </tr>
  </table>
  </body>
</html>

运行结果如下,可以看到我们在表格中嵌套的表格,其中有段落、图片、列表、表格:

1667057365030.jpg

相关文章
|
2月前
|
存储 人工智能 前端开发
前端大模型应用笔记(三):Vue3+Antdv+transformers+本地模型实现浏览器端侧增强搜索
本文介绍了一个纯前端实现的增强列表搜索应用,通过使用Transformer模型,实现了更智能的搜索功能,如使用“番茄”可以搜索到“西红柿”。项目基于Vue3和Ant Design Vue,使用了Xenova的bge-base-zh-v1.5模型。文章详细介绍了从环境搭建、数据准备到具体实现的全过程,并展示了实际效果和待改进点。
155 2
|
2月前
|
JavaScript 前端开发 程序员
前端学习笔记——node.js
前端学习笔记——node.js
45 0
|
26天前
|
缓存 前端开发 中间件
go语言中Web框架
【10月更文挑战第22天】
42 4
|
2月前
|
人工智能 前端开发
2024 川渝 Web 前端开发技术交流会「互联」:等你来报名!
2024 川渝 Web 前端开发技术交流会「互联」:等你来报名!
2024 川渝 Web 前端开发技术交流会「互联」:等你来报名!
|
2月前
|
存储 弹性计算 算法
前端大模型应用笔记(四):如何在资源受限例如1核和1G内存的端侧或ECS上运行一个合适的向量存储库及如何优化
本文探讨了在资源受限的嵌入式设备(如1核处理器和1GB内存)上实现高效向量存储和检索的方法,旨在支持端侧大模型应用。文章分析了Annoy、HNSWLib、NMSLib、FLANN、VP-Trees和Lshbox等向量存储库的特点与适用场景,推荐Annoy作为多数情况下的首选方案,并提出了数据预处理、索引优化、查询优化等策略以提升性能。通过这些方法,即使在资源受限的环境中也能实现高效的向量检索。
|
2月前
|
机器学习/深度学习 弹性计算 自然语言处理
前端大模型应用笔记(二):最新llama3.2小参数版本1B的古董机测试 - 支持128K上下文,表现优异,和移动端更配
llama3.1支持128K上下文,6万字+输入,适用于多种场景。模型能力超出预期,但处理中文时需加中英翻译。测试显示,其英文支持较好,中文则需改进。llama3.2 1B参数量小,适合移动端和资源受限环境,可在阿里云2vCPU和4G ECS上运行。
105 1
|
2月前
|
存储 前端开发 JavaScript
从 Web 2.0 到 Web 3.0:前端开发的历史与未来
【10月更文挑战第4天】本文探讨了从 Web 2.0 到 Web 3.0 的前端开发演变过程。Web 2.0 时代,前端开发者从静态网页设计走向复杂交互,技术框架如 jQuery、React 和 Vue 带来了巨大的变革。而 Web 3.0 以区块链技术为核心,带来了去中心化的互联网体验,前端开发者面临与区块链交互、去中心化身份验证、分布式存储等新挑战。文章总结了 Web 2.0 和 Web 3.0 的核心区别,并为开发者提供了如何应对新技术的建议,帮助他们在新时代中掌握技能、设计更安全的用户体验。
58 0
从 Web 2.0 到 Web 3.0:前端开发的历史与未来
|
2月前
|
前端开发 算法 测试技术
前端大模型应用笔记(五):大模型基础能力大比拼-计数篇-通义千文 vs 文心一言 vs 智谱 vs 讯飞vsGPT
本文对比测试了通义千文、文心一言、智谱和讯飞等多个国产大模型在处理基础计数问题上的表现,特别是通过链式推理(COT)提示的效果。结果显示,GPTo1-mini、文心一言3.5和讯飞4.0Ultra在首轮测试中表现优秀,而其他模型在COT提示后也能显著提升正确率,唯有讯飞4.0-Lite表现不佳。测试强调了COT在提升模型逻辑推理能力中的重要性,并指出免费版本中智谱GLM较为可靠。
前端大模型应用笔记(五):大模型基础能力大比拼-计数篇-通义千文 vs 文心一言 vs 智谱 vs 讯飞vsGPT
|
2月前
|
移动开发 前端开发 JavaScript
前端开发实战:利用Web Speech API之speechSynthesis实现文字转语音功能
前端开发实战:利用Web Speech API之speechSynthesis实现文字转语音功能
199 0
|
2月前
|
存储 安全 前端开发
在前端开发中需要考虑的常见web安全问题和攻击原理以及防范措施
在前端开发中需要考虑的常见web安全问题和攻击原理以及防范措施
178 0