表格标签的常用属性

news/2024/10/18 5:43:58/

表格标签的常用属性

<table></table>:表格

<tr></tr>:行

<td></td>:列

td要写在tr里面

<tr><td></td>
</tr>

常用属性:

border---指定边框 

width---宽度   

height---高度

bgcolor---背景颜色。加在table上,设置的是整个table的颜色,加在<tr>里设置的是一行的颜色。加在<td>设置的是一格的颜色。

align---对齐方式  ,加在table上,设置的是整个table的对齐方式,加在<tr>里设置的是一行中的数据的对齐方式。加在<td>设置的             是一格里的数据的对齐方式。

例如:

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><table border="1px" width="300px" bgcolor="yellow" align="center"><tr bgcolor="red">			<td align="center">1</td><td>1</td><td>1</td><td>1</td>	</tr><tr>			<td>1</td><td bgcolor="green">1</td><td>1</td><td>1</td>	</tr><tr>			<td>1</td><td>1</td><td>1</td><td>1</td>	</tr></table></body>
</html>

运行截图:

 

表格的合并:

colspan:跨列

rowspan;跨行

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><table border="1px" width="500px"><!--一个4行5列的表格--><tr><!--将11和12合并(要把12删除)--><td colspan="2">11</td>    <!--<td>12</td>--><td>13</td><td>14</td>	<td>15</td>	</tr><tr><td>21</td><td>22</td><td>23</td><td>24</td>	<td>25</td>	</tr><tr><td>31</td><!--将32,33,42,43合并--><td colspan="2" rowspan="2">32</td><!--<td>33</td>--><td>34</td>	<!--将35和45合并(要将45删除)--><td rowspan="2">35</td>	</tr><tr><td>41</td><!--<td>42</td><td>43</td>--><td>44</td>	<!--<td>45</td>-->	</tr></table></body>
</html>

运行截图:

 

表格的嵌套 :

<tr><td>31</td><td colspan="2" rowspan="2"><table border="1px" width="100%"><tr><td>1</td><td>1</td><td>1</td>	</tr><tr><td>1</td><td>1</td><td>1</td>	</tr></table>	</td><td>34</td>	<td>35</td>	
</tr>

运行截图:


http://www.ppmy.cn/news/533591.html

相关文章

【系统开发】尚硅谷 - 谷粒商城项目笔记(十一):K8S

文章目录 K8s简介架构原理核心概念控制平面组件&#xff08;Control Plane Components&#xff09;kube-apiserveretcdkube-schedulerkube-controller-managercloud-controller-manager Node 组件kubeletkube-proxy容器运行时&#xff08;Container Runtime&#xff09; 插件&a…

td和th区别

Table往往是由一个表格名称再加上一行或多行的表格内容所构成块状结构。表格的每一行 内又由一个或多个表项单元组成&#xff0c;并且表项单元还可以按照行或列的方式结合在一起&#xff0c;成 为一个大的表项单元。 下面我们先来看一个Table实例&#xff1a; <TABLE BORDER…

Windows页面置换算法与文件操作

实验一 一、实验内容或题目&#xff1a; 随机产生页面访问序列&#xff0c;并实现LRU, FIFO, OPT三种算法进行缺页比较 二、实验目的与要求&#xff1a; 1、编写程序&#xff0c;随机产生页面访问序列&#xff0c;并实现LRU, FIFO, OPT三种算法进行缺页比较。 2、理解三种算…

尚硅谷大数据Flink1.17实战教程-笔记02【Flink部署】

尚硅谷大数据技术-教程-学习路线-笔记汇总表【课程资料下载】视频地址&#xff1a;尚硅谷大数据Flink1.17实战教程从入门到精通_哔哩哔哩_bilibili 尚硅谷大数据Flink1.17实战教程-笔记01【Flink概述、Flink快速上手】尚硅谷大数据Flink1.17实战教程-笔记02【Flink部署】尚硅谷…

小白也会的------新建Python虚拟环境,查看该虚拟环境的路径,将该虚拟环境的所有库和版本号导出到一个 requirements.txt 文件中

我的目录标题 1、新建Python虚拟环境2、查看该虚拟环境的路径3、将该虚拟环境的所有库和版本号导出到一个 requirements.txt 文件中4、如果你只需要将当前虚拟环境中安装的所有库和版本号导出到一个 requirements.txt 文件中&#xff0c;而不需要包括每个库的来源&#xff0c;可…

基于YOLOv8模型+CnOCR识别技术实现汽车车牌识别

目录 第1步:导入库 第2步:训练数据集下载 训练\验证\测试分割 第2步:数据探索 示例图像

有什么平价好用的蓝牙耳机?500内最强蓝牙耳机点评

无线蓝牙耳机早已取代有线耳机在人们心目中的地位。无线蓝牙耳机的使用非常方便&#xff0c;不仅不会被有线耳机那样束缚着&#xff0c;在开车、工作、娱乐的时候&#xff0c;无线蓝牙耳机都能无限制的使用&#xff0c;那么市场上的蓝牙耳机各式各样&#xff0c;有什么平价好用…

适合女生的蓝牙耳机有哪些?四款高颜值蓝牙耳机推荐

现如今&#xff0c;科技产品和智能设备已经紧紧将我们包围&#xff0c;因工作或生活上的原因&#xff0c;很多童鞋手上都拥有多台设备。现在蓝牙耳机越来越成为我们使用耳机的主流类型&#xff0c;很多人也想拥有一款好用的蓝牙耳机&#xff0c;但是又不知道如何挑选&#xff0…