前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >html中表格整体居中,html中怎么把表格居中

html中表格整体居中,html中怎么把表格居中

作者头像
全栈程序员站长
发布2022-07-22 10:45:58
14.3K0
发布2022-07-22 10:45:58
举报
文章被收录于专栏:全栈程序员必看

大家好,又见面了,我是你们的朋友全栈君。

html中把表格居中的方法:首先创建一个HTML示例文件;然后使用table标签创建一个两行两列的表格;接着给table标签添加一个class属性;最后将margin属性设置为“0 auto”即可。

4930b15117aadb444e77e530e1c52d50.png
4930b15117aadb444e77e530e1c52d50.png

本文操作环境:windows7系统、HTML5&&CSS3版、Dell G3电脑。

html怎么让表格在页面居中

新建一个html文件,命名为test.html,用于讲解html怎么让表格在页面居中。

352d2127cf6a4dbfe3d8354722c77d85.png
352d2127cf6a4dbfe3d8354722c77d85.png

在test.html文件内,使用table标签创建一个两行两列的表格,用于测试。

6599ea0be087974b716ab0ec8eee06c9.png
6599ea0be087974b716ab0ec8eee06c9.png

在test.html文件内,给table标签添加一个class属性,用于下面设置css样式。

a08736ffeb23aa04fc9d3963b2e41a1a.png
a08736ffeb23aa04fc9d3963b2e41a1a.png

在css标签内,通过class设置table表格的样式,定义table表格的宽度为100px,高度为100px。

a40bb60f68bd1e240d3b2f63c2b466db.png
a40bb60f68bd1e240d3b2f63c2b466db.png

在css标签内,再将margin属性设置为0 auto,从而实现表格居中显示。

f5714bcfda119905d7aef2a2142556b7.png
f5714bcfda119905d7aef2a2142556b7.png

在浏览器打开test.html文件,查看实现的效果。

cb740bc099315935a3937475c8bca482.png
cb740bc099315935a3937475c8bca482.png

发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/125368.html原文链接:https://javaforall.cn

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2022年4月5,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档