表格

表格 table

1. 创建表格

在HTML网页中,要想创建表格,就需要使用表格相关的标签。

创建表格的基本语法:

<table>
  <tr>
    <td>单元格内的文字</td>
    ...
  </tr>
  ...
</table>

要深刻体会表格、行、单元格他们的构成。

在上面的语法中包含基本的三对HTML标签,分别为 table、tr、td,他们是创建表格的基本标签,缺一不可,下面对他们进行具体地解释

  1. table用于定义一个表格标签。

  2. tr标签 用于定义表格中的行,必须嵌套在 table标签中。

  3. td 用于定义表格中的单元格,必须嵌套在> <tr></tr>标签中。

  4. 字母 td 指表格数据(table data),即数据单元格的内容,现在我们明白,表格最合适的地方就是用来存储数据的。

2. 表格属性

三参为0, 平时开发的我们这三个参数 border cellpadding cellspacing 为 0

3. 表头单元格标签th

  • 作用:
    • 一般表头单元格位于表格的第一行或第一列,并且文本加粗居中
  • 语法:
    • 只需用表头标签<th></th>替代相应的单元格标签<td></td>即可。
<table width="500" border="1" align="center" cellspacing="0" cellpadding="0">
		<tr>  
			<th>姓名</th> 
			<th>性别</th>
			<th>电话</th>
		</tr>
		<tr>
			<td>小王</td>
			<td></td>
			<td>110</td>
		</tr>
		<tr>
			<td>小明</td>
			<td></td>
			<td>120</td>
		</tr>	
</table>

4. 表格标题caption

定义和用法

<table>
   <caption>我是表格标题</caption>
</table>

注意:

  1. caption 元素定义表格标题,通常这个标题会被居中且显示于表格之上。
  2. caption 标签必须紧随 table 标签之后。
  3. 这个标签只存在 表格里面才有意义。

5. 合并单元格

5.1 合并单元格2种方式

  • 跨行合并:rowspan="合并单元格的个数"
  • 跨列合并:colspan="合并单元格的个数"

5.2 合并单元格顺序

**合并的顺序我们按照 先上 后下 先左 后右 的顺序 **

5.3 合并单元格三步曲

  1. 先确定是跨行还是跨列合并
  2. 根据 先上 后下 先左 后右的原则找到目标单元格 然后写上 合并方式 还有 要合并的单元格数量 比如 :
  3. 删除多余的单元格 单元格

表格划分结构(了解)

对于比较复杂的表格,表格的结构也就相对的复杂了,所以又将表格分割成三个部分:题头、正文和脚注。而这三部分分别用:thead,tbody,tfoot来标注, 这样更好的分清表格结构

注意:

1. <thead></thead>:用于定义表格的头部。用来放标题之类的东西。 内部必须拥有 标签!
2. <tbody></tbody>:用于定义表格的主体。放数据本体 。
3. <tfoot></tfoot>放表格的脚注之类。
4. 以上标签都是放到table标签中。

posted @   strawberry&cigarette  阅读(201)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· DeepSeek “源神”启动!「GitHub 热点速览」
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· C# 集成 DeepSeek 模型实现 AI 私有化(本地部署与 API 调用教程)
· DeepSeek R1 简明指南:架构、训练、本地部署及硬件要求
· 2 本地部署DeepSeek模型构建本地知识库+联网搜索详细步骤
点击右上角即可分享
微信分享提示