表格标签。

原创 于 2024-12-03 08:15:00 发布 · 2.2k 阅读 · 36 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
GEO检测
标签
#html #前端

1.1 在网页中使用表格

表格在网页制作中主要的作用是用来描述具有二维结构的数据。包括的标签有table、thead、tbody、tfoot、tr、td。

<table width="300" border="1"> ①
    <thead> ②
        <tr> ③
            <td>this text is in the thead.</td>
            ④
        </tr>
    </thead>
    <tbody> ⑤
        <tr>
            <td>this text is in the tbody.</td>
        </tr>
    </tbody>
    <tfoot> ⑥
        <tr>
            <td>this text is in the table footer.</td>
        </tr>
    </tfoot>
</table>

代码解析：

① table标签用于定义一个表格。一个表格必须包含至少一个横行组，每一个横行组被分成三个部分：头、主干、尾。头和尾是可选的。thead元素定义头，tfoot元素定义尾，tbody元素则定义主干。

② thead标签元素定义头。

③ tr>标签用于定义一行。

④ td>标签用于定义一列。td 也叫做单元格，必须放在tr中。

⑤ tbody元素则定义主干。

⑥ tfoot元素定义尾。

运行效果如图所示。

image-20201117124633773

1.2Table 的属性
1.2.1 表格的边框
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>表格的边框</title>
    </head>
    <body>
        <table width="200" border="1"> 
            <tr>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
            </tr>
        </table>
    </body>
</html>

 

border="n"，n 是一个数字，单位是像素， 当 n = 0 时表示表格没有边框，当 n >0 时表示表格有边框，边框的宽度是 n 像素，注意n必须为整数！！运行效果如图所示：

image-20201117124704017

1.2.2 表格的宽和高

width 属性表示表格的宽度，height 属性表示表格的高度。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>表格的宽和高</title>
    </head>
    <body>
        <table width="200" height="100" border="1"> 
            <tr>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
            </tr>
        </table>
    </body>
</html>

width=n 或 m% height=n 或 m%，n 代表一个数值，单位为像素（px）,m 代表 0-100 的数，即 0%-100%，这个百分比是相对于表格所在的容器的百分比。运行结果如图所示，表格的宽度是 200px ，高度是 100px。

image-20201117124745663

1.2.3 表格的对齐

align属性表示表格的对齐方式，主要用left、center、right这些值，表示左对齐、居中对齐、右对齐等。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>表格的宽和高</title>
    </head>
    <body>
        <table width="200" height="100" border="1" align="center"> 
            <tr>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
            </tr>
        </table>
    </body>
</html>

align 表示表格在水平方向上的对齐方式，有三个值 left、center、right，分别表示居左对齐、居中对齐和居右对齐，省略 align 时是居左对齐。这个例子中align="center"，是居中对齐，如图所示：

image-20201117124800388

1.4.4 表格的背景

gcolor 属性表示表格的背景颜色，Background 属性表示表格的背景图像。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>表格的宽和高</title>
    </head>
    <body>
        <table width="200" background="bg.jpg" bgcolor="#CCCCCC">
            <tr>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
            </tr>
        </table>
    </body>
</html>

bgcolor 表示背景色，background 表示背景图像，当两者同时使用时背景图像会遮住背景色，Background 的背景图像会平铺整个表格，类似于 Body 的背景图像效果，背景图像的路径建议使用相对路径。  

1.4.5 表格的填充和边距

cellpadding 表示表格的边距，cellspacing 表示表格的间距。边距是指单元格内的元素距离单元格边缘的距离，间距是指单元格与单元格之间的距离。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>表格的宽和高</title>
    </head>
    <body>
       <table width="300" border="1" cellpadding="10" cellspacing="10"> ①
            <tr>
                <td>第一行第一列</td>
                <td>第一行第二列</td>
            </tr>
            <tr>
                <td>第二行第一列</td>
                <td>第二行第二列</td>
            </tr>
        </table>
    </body>
</html>

cellpadding="10" 表示边距为 10 px，cellspacing="10"表示间距为 10 px，如果不设置 cellpadding 和 cellspacing ，它们的默认值是 2px。运行结果如图

image-20201117124816927

1.3 表格的tr标签

tr标签表示的表格的行，我们可以给行设置高度(height)和背景色(bgcolor)

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>表格的行高和背景色</title>
    </head>
    <body>
      <table width="300" border="1">
            <tr height="30" bgcolor="#CCCCCC"> 
                <td>&nbsp;</td>
                <td>&nbsp;</td>
            </tr>
            <tr height="40" bgcolor="#999999">
                <td>&nbsp;</td>
                <td>&nbsp;</td>
            </tr>
            <tr height="50" bgcolor="#666666">
                <td>&nbsp;</td>
                <td>&nbsp;</td>
            </tr>
        </table>
    </body>
</html>

height="n" 表示行的高度，单位是像素。当设置行高时这一行的所有列都与行高相同。bgcolor="颜色值"表示这一行的背景色。本例中第一行的高度是 30px,背景色是"#CCCCCC"，第二行的高度是 40px ，背景色是"#999999"，第三行的高度是 50px，背景色是"#666666"，如图所示：

image-20201117124830914

1.4表格的td标签

td标签表示的表格的单元格(也就是列)，我们可以给列设置宽和高（width 和 height）

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>单元格的宽和高</title>
    </head>
    <body>
      <table width="300" border="1" cellpadding="2" cellspacing="2"
               bgcolor="#CCCCCC" > 
            <tr height="20"> 
                <td width="100" height="20">&nbsp;</td> 
                <td width="100" height="30">&nbsp;</td> 
                <td width="100" height="40">&nbsp;</td> 
            </tr>
        </table>

    </body>
</html>

如果行设置了高度，行中的列也设置了高度，那么行的实际高度是行和列中高度最高的。这个例子中行的高度是第三个单元格设置的 40px。

表格的总宽度设置为 300px，每一列的宽度设置为 100px，那么三列之和与表格总宽度是否相等呢？如图 8 所示，在 Dreamweaver 中显示表格的宽度数据，每一列设置的值均为 100px，而实际上第一列和第二列的宽度是 90px，第三列的实际宽度是 92px。这是因为表格设置了 border="1" cellpadding="2" cellspacing="2"属性，他们占用了表格的一部分宽度。

1.5 表格的嵌套

表格的嵌套是指将一个表格放在另外一个表格的单元格中。可以用来布局，是早期DIV+CSS页面布局出现前最重要的布局方式之一，现在很少用于布局，也不建议用表格布局。

 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>表格的嵌套</title>
    </head>
    <body>
        <table width="300" border="1">
            <tr>
                <td>&nbsp;</td>
                <td>
                    <table width="100" border="1" align="center"> 
                        <tr>
                            <td>&nbsp;</td>
                            <td>&nbsp;</td>
                        </tr>
                    </table>
                </td>
            </tr>
        </table>
    </body>
</html>

① 第一个表格是一行两列，第二个表格也是一行两列。在第一个表格的第一行的第二列中嵌套了第二个表格，如图所示：

image-20201117124845784

1.6 表格的合并
 1.6.1 单元格跨行
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>单元格跨行</title>
    </head>
    <body>
        <table width="300" border="1">
            <tr>
                <td rowspan="2">&nbsp;</td> 
                <td>&nbsp;</td>
                <td>&nbsp;</td>
            </tr>
            <tr>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
            </tr>
        </table>
    </body>
</html>

rowspan="n" 中 n 是一个整数，表示这个单元格在垂直方向跨的行数。运行的结果如图所示：

image-20201117124858635

1.6.2 单元格跨列

 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>单元格跨行</title>
    </head>
    <body>
       <table width="300" border="1">
            <tr>
                <td colspan="2" align="center">1001 班平均成绩</td>
            </tr>
            <tr>
                <td align="center">笔试</td>
                <td align="center">机试</td>
            </tr>
            <tr>
                <td align="center">68</td>
                <td align="center">72</td>
            </tr>
        </table>
    </body>
</html>

rowspan="n" 中 n 是一个整数，表示这个单元格在垂直方向跨的行数。运行的结果如图3-20所示，主要属性参考表

image-20201117124942151

属性名属性值功能
width数字（单位像素）单元格的高度
height数字（单位像素单元格宽度
alignleft center right（左中右）单元格水平对齐方式
valigntop middle buttom（上中下）单元格垂直对齐方式
bgcolor颜色单元格的背景色
rowspan数字垂直方向跨行
colspan数字水平方向跨列

 

 

 

 

 

 

 

   

 

 

 

 

 

 

 

 

 

 

 

 

中国各个省份的id代号是多少？各省简称是什么？
热门推荐
weixin_33548207的博客
02-20 2万+
1. 北京市（京）:11 2. 天津市（津）:12 3. 上海市（沪）:31 4. 重庆市（渝）:50 5. 河北省（冀）:13 6. 河南省（豫）:41 7. 云南省（云）:53 8. 辽宁省（辽）:21 9. 黑龙江省（黑）:23 10. 湖南省（湘）:43 11. 安徽省（皖）:34 12. 山东省（鲁）:37 13. 新疆维吾尔（新）:65 14. 江苏省（苏）:32 15. 浙江省（浙）:33 16. 江西省（赣）:36 17. 湖北省（鄂）:42 18. 广西壮族（桂）:45 19. 甘肃省（甘
Charls数据库省市社区代码
2201_75895086的博客
02-02 3810
中国健康与养老追踪调查（China Health and Retirement Longitudinal Study, CHARLS）旨在收集一套代表中国45岁及以上中老年人家庭和个人的高质量微观数据，用以分析我国人口老龄化问题，推动老龄化问题的跨学科研究。赵梦晗等（2023）基于CHARLS数据分析不同类型生育-就业生命历程轨迹对中老年时期健康的影响发现，生育次数的增加仅对女性中老年时期的健康产生负面影响，提早不工作则对两性健康都不利。中国健康与养老追踪调查数据库(CHARLS)450个样本和观测值。
Web前端-Ajax-02-实例:根据省份id查询省份信息
TSCCG的博客
08-29 1026
Web前端-Ajax-02-根据省份id查询省份名称实例 1.需求 用户在文本框输入省份的编号id，在其他文本框中显示省份名称。 2.准备工作 2.1创建数据库与数据表 2.1.1创建数据库【db_ajax】 create database db_ajax; 2.1.2创建省份信息表【province】 SET FOREIGN_KEY_CHECKS=0; DROP TABLE IF EXISTS `province`; CREATE TABLE `province` ( `id` int(11)
echarts中国数据(省市两级)
专注echarts开发20年
03-02 3859
2018年3月05日更新说明：1.那曲市更名为那曲地区，从而保证和echarts数据保持一致。2.新疆，河南，湖北几个二级地市使用的编码却是三级格式的，上一版遗漏了。idaddress_codeaddress_name3766110000北京3783120000天津3800130000河北3801130100石家庄市3824130200唐山市3839130300秦皇岛市3847130400邯郸市3...
根据省份id查询当前的省会/简称/省会城市
wflsyf的博客
12-29 1889
jsp代码 <%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <title>使用json格式的数据</title> </head> <body> <script type="text/javascript"> //发起ajax请求，传参给服务器，服务器返回数据 dosearch=f
ajax实现选择省份带出城市（从数据库取数据）
big121380的博客
10-11 2869
实现选择省份后可以带出省份的城市
使用ajax实现省市联动
w5206666的博客
04-22 1412
本次实现省市联动的预期目标为：省份城市工厂数据从数据库导入；当选择省份的时候，从数据库导出省份所对应的全部城市。相应的，点击城市可以导入城市的工厂数据。 下拉框的样式（只做示例，其他样式自己可选择）： 前端HTML代码（使用的bootstrap，截取自己写的部分代码的部分）： <select class="form-control" name="" id="c1"> <option>请选择省份</option> {% for pr
ajax-210810-05---练习&局部刷新-从数据库中获取数据
白光一的博客
08-10 376
ajax-210810-05—练习&局部刷新-从数据库中获取数据 index.jsp（主页面） ProviceDao.java（dao层，从数据库中获取数据） QueryProviceServlet.java（调用dao层，把数据响应给页面） web.xml（servlet映射） 结果展示 index.jsp（主页面） <%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> &lt
jquery-210813-01---jquery实现ajax请求案例
白光一的博客
08-13 578
jquery-210813-01—jquery实现ajax请求案例 index.jsp（发起ajax请求） QueryJsonServlet.java（接收浏览器请求，响应请求） ProviceObjectDao.java（连接数据库，做查询） web.xml（servlet映射） Province.java（实体类） 数据库表 index.jsp（发起ajax请求） <%@ page contentType="text/html;charset=UTF-8" language="java" %
jquery-210813-02---jquery实现ajax&级联查询
白光一的博客
08-13 401
jquery-210813-02—jquery实现ajax&级联查询 index.jsp（主界面，发起ajax请求） ProvinceDao.java（查找所有的Province） ProvinceServlet.java（响应ajax请求，返回一个json类型Province数组） CascadeFindDao.java（根据Province的id获取所有的City） CascadeFindServlet.java（响应ajax请求，返回一个json类型City数组） web.xml（servl
利用Ajax和JSON实现关于查找省市名称的二级联动功能
weixin_30501857的博客
12-02 138
　　功能实现的思路：我们经常碰见网上购物时候填写收件地址会用到这个查找省市县的三级联动查找功能，我们可以利用Ajax和JSON技术模拟这个功能，说白了同样是使用Ajax的局部数据更新功能这个特性。因为省市都会有很多个，所以还需要使用JSONArray对象。当我们选择某一个省的时候，会自动触发一个局部更新功能，这个功能的作用就是把我们选择的关于这个省的所有市名全部在指定的位置显示出来，当换成另外一个...
02-ajax练习三级联动
探鱼不是鱼
11-05 189
数据 导入数据库 app.js const { request, response } = require('express'); const express = require('express'); const db = require('./db'); const Cities = require('./models/cites'); /* console.log(Cities) //Model { cities } */ const app = express(); app.
ajax-210810-07---json演示
白光一的博客
08-10 195
ajax-210810-07—json演示 演示 ajaxjson.jsp（主页面） ProviceObjectDao.java（dao层，获取Province对象） QueryJsonServlet.java（把province对象转为json格式，发给浏览器） web.xml（Servlet映射） 结果展示 演示 ajaxjson.jsp（主页面） <%@ page contentType="text/html;charset=UTF-8" language="java" %>
【课程设计】基于Spring Boot的大学生就业管理系统毕业设计源码290915
高级程序源的博客
08-29 3013
1.管理员功能需求： 用户管理 修改登录密码 留言管理 新闻管理 公告管理 企业分类管理 企业管理 投递简历管理 招聘管理 学生就业查询统计 2.企业功能需求： 企业登录 个人资料管理 新闻管理 招聘管理 投递简历管理 面试邀请管理 合同协议管理 3.学生功能需求： 个人资料管理 校园新闻管理 招聘管理 投递简历管理 求职管理 公告管理 留言管理 4.老师功能需求： 修改登录密码 学生信息管理 留言管理 新闻管理 公告管理 投递简历管理 学生就业查询统计...
省市联动备忘
AaronWang0920的博客
12-22 646
商城项目订单地址省市联动小结。 这种情况要求再jsp页面加载完成后省的数据就要从数据库中查询出来。//当页面加载完成后，就需要把省显示出来 function loadProvince(){ //获取xmlhttprequest var xhr = getXMLHttpRequest(); //设置和服务器交互的状态改变对应的事件 xhr.onreadystatech
省市二级联动（连接数据库）
weixin_30498921的博客
02-02 1433
根据省选择市名称。 1、省份用的struts标签<s:select>后台把省信息存到list里面 　　后台代码 this.provinceList=provincesDefineService.findAllProvinces(); 2、前台用list接收，代码： <tr> <td style="...
实现移动端省市区三级联动的jQuery完整项目
最新发布
weixin_36304957的博客
10-29 1144
本文还有配套的精品资源，点击获取 简介：省市区三级联动功能在移动应用中十分常见，尤其在地址选择过程中。使用jQuery库可以有效地实现这一功能，并提供流畅的用户体验。本项目通过JSON数据和JavaScript动态更新下拉菜单，使得用户在选择一个省后能自动加载对应的城市数据，在选择城市后自动加载对应的区数据。整个项目包含了HTML文件、CSS文件、JavaScript文件以...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值