位置: IT常识 - 正文

如何使用 CSS 使表格居中(快速指南)(css怎么调用)

编辑:rootadmin
如何使用 CSS 使表格居中(快速指南)

推荐整理分享如何使用 CSS 使表格居中(快速指南)(css怎么调用),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:css使用教程,如何使用css使特定字符不显示,css使用教程,使用css的三种方式,使用css的三种方式,使用css的三种方式,使用css有哪些小技巧,css怎么使用,内容如对您有帮助,希望把文章链接给更多的朋友!

在网页设计中使用表格有一段有趣的历史。在采用 CSS 之前,表格不仅仅用于以传统方式显示表格数据练习列表,而是更常用于控制完整的页面布局。

那时,HTML 表格用于定义网页的结构和视觉外观,其中表格的位置可以直接在 HTML 中指定。例如,要将表格的对齐方式设置为中心,可以简单地编写:

<table align="center">…</table>

但是,以这种方式对齐表格不再正确,并且在 HTML5 中已被弃用。这是因为现代 Web 标准规定了结构 (HTML) 和样式 (CSS) 的分离,而上述方法违反了该原则。

绝不应该使用 HTML 来设置元素的显示方式;这就是 CSS 的工作。那么在 CSS 中将表格居中的正确方法是什么?在我们 wpDataTables 团队的这篇文章中,我们解决了这个问题,并向您展示了一些关于如何正确对齐表格的技巧。

考虑到我们已经创建了一个很棒的WordPress 表格插件,我们对表格了解一两件事,所以让我们开始吧。

如何使用 CSS 使表格居中?

CSS 设置页面的外观,使您能够控制每个元素的外观和位置,包括表格元素及其所有子元素,例如 th、tr 和 td。

首先,让我们回顾一下使用 CSS 使表格居中的“正确”方式。如果你的左右边距值相等,现代浏览器应该显示表格居中。实现此目的的一种简单方法是将两个边距设置为自动。

下面是如何用 CSS 编写的示例:

table{ margin-right: auto;margin-left: auto;}

请注意,您不能像使用文本一样将表格居中 - 例如使用“text-align:center”。这是因为表格元素是块级元素,而不是内联元素。“text-align:center”只会将内联内容居中,例如表格内的文本,而不是表格本身。

但是,对于旧版本的 Internet Explorer,存在将块级元素视为内联元素的错误。因此,在某些版本的 IE 中使表格居中的唯一方法是在表格的父元素上显式设置“text-align: center”(例如,如下所示的 body 元素):

body { text-align: center;}

您可以使用“margin-left: auto;”来测试不同浏览器在不同样式下的表现。边距右:自动”或“文本对齐:居中”。

我们将讨论如何在现代和旧版浏览器中将表格居中以使其看起来正确。

示例将具有以下一般格式:

<div><table></table></div>

样式适用于 <div>、<table> 或有时同时适用于两者。

我们将用来设置边距的样式表部分是:

.center1{ margin-right: auto;margin-left: auto;}.center2{ text-align: center;}如何使用 CSS 使表格居中(快速指南)(css怎么调用)

此示例适用于较新的浏览器。它也适用于大多数较旧的浏览器。使用此方法后,请在不同的浏览器中打开它以检查其外观。

旧浏览器和新浏览器的 CSS:

.centertbl{ text-align: center;}.centertbl table{ margin-left: auto;margin-right: auto;text-align: left;}

它是如何工作的?第一部分被放入包含 <table> 的 <div> 中。这将使 Internet Explorer 5 和 Netscape 4 中的表居中。第二部分应用于 <div> 中的 <table>。

边距设置可让您在与 CSS 兼容的浏览器中将表格居中。然后,内联文本将被放回默认的左对齐,覆盖最初的“text-align: center”以获得旧浏览器的支持。

如何以边距居中

使表格居中的最常见方法之一是将底部和顶部边距设置为 0,并将左右边距设置为 auto。

下面是一个常用的方法:

table { margin: 0 auto;}

或者你可以这样做:

table { margin-left: auto; margin-right: auto;}

如果您想要一个精确宽度的表格,您可以像往常一样执行此操作,自动边距将划分剩余的空间。

table { width: 500px; margin: 0 auto;}

另一种方法是使用百分比来定义宽度:

table { width: 50%; margin: 0 auto; /* same as margin: 0 25%; */}单元格对齐:文本对齐与垂直对齐

如果你想知道如何在 CSS 中使文本居中,在单元格中对齐文本有两个部分;水平和垂直。Horizo​​ntally 是文本是否将对齐该单元格的中心、左侧或右侧。这由 text-align 属性控制。

垂直是在单元格的中间、顶部还是底部。这由 vertical-align 属性控制。

您将以下属性应用于 TH 或 TD 元素,以使您的文本垂直和水平对齐,但您需要。例如:

td {text-align: center;vertical-align: top;}

对齐文本是指在所有单词之间添加空格,直到它们完全适合行上的可用空间。最后一行没有理由。

表格样式提示

在结束之前,我们认为有一个快速提示列表供您参考可能会很有用。当您在 CSS 中制作表格时,这些将有所帮助。

使用 text-align 排列你的 <td> 和 <th> 文本。这将使它看起来更整洁,更易于阅读。要将表格分成有意义的部分,您可以使用 <tfoot>、<tbody> 和 <thead>。这也为您提供了更多可以应用 CSS 的部分。这使得分层多个样式变得更加简单。使用表格布局可以让您更轻松地设置列宽。设置标题宽度时,列宽将相同。使用交替颜色使表格更易于阅读。通过快速扫描,您可以看到同一行中有哪些信息。保持你的桌子简单。您可以使用百分比,因此您不必每次都更改大小。您可以利用边框折叠来制作更干净整洁的表格。结束关于如何使表格居中的想法

现在您知道如何使用 CSS 使表格居中。如前所述,执行此操作的“正确”方法是将左右边距设置为自动。这种方法适用于几乎所有与 CSS 兼容的新浏览器。

对于一些不太现代的浏览器,这是行不通的。如果是这种情况,您可以使用 text-align 方法设置表格样式并用 <div> 将其包围。如果你想通过在向外的 <div> 上使用 text-align 使表格居中,你可以使用 text-align 来实现。

每当您想以特定方式定位内联文本时,您还可以使用文本对齐或垂直对齐值设置表格单元格的样式。

如果你喜欢阅读这篇关于如何使用 CSS 使表格居中的文章,你应该看看这篇关于Bootstrap 表格的文章。

我们还写了一些相关的主题,例如表格背景颜色、HTML 表格、带有 CSS 的响应式表格、CSS 表格和jQuery 表格插件。

本文链接地址:https://www.jiuchutong.com/zhishi/295362.html 转载请保留说明!

上一篇:eslint常见报错及解决(eslint不起作用)

下一篇:Three.js--》实现3d小岛模型搭建(three.js gui)

  • oppo ace2和小米10对比(oppoace2和小米10至尊纪念版哪个好)

    oppo ace2和小米10对比(oppoace2和小米10至尊纪念版哪个好)

  • 速龙x4 641相当于i几

    速龙x4 641相当于i几

  • 打印机红灯亮是怎么回事(打印机红灯亮是什么情况)

    打印机红灯亮是怎么回事(打印机红灯亮是什么情况)

  • 设置群待办是什么意思(群里设置群待办啥意思)

    设置群待办是什么意思(群里设置群待办啥意思)

  • 华为nova7怎样截屏(华为nova7怎样截视频)

    华为nova7怎样截屏(华为nova7怎样截视频)

  • 苹果ld邮件是什么意思(苹果id的邮件格式怎么弄)

    苹果ld邮件是什么意思(苹果id的邮件格式怎么弄)

  • oppo有四个摄像头有什么作用(oppo四个摄像头分别有什么用)

    oppo有四个摄像头有什么作用(oppo四个摄像头分别有什么用)

  • 网线插座分五六类吗(网线面板插座区分六类还是五类)

    网线插座分五六类吗(网线面板插座区分六类还是五类)

  • H1芯片是几代(h1芯片是一代还是二代)

    H1芯片是几代(h1芯片是一代还是二代)

  • 荣耀play4tpro怎么截屏(荣耀play4tpro怎么看电池健康)

    荣耀play4tpro怎么截屏(荣耀play4tpro怎么看电池健康)

  • 打不开该网页因为已丢失网络链接(打不开该网页因为已丢失)

    打不开该网页因为已丢失网络链接(打不开该网页因为已丢失)

  • qq怎么添加附近的人(qq怎么添加附近的人功能)

    qq怎么添加附近的人(qq怎么添加附近的人功能)

  • 华为微信怎么上锁(华为微信怎么上密码锁)

    华为微信怎么上锁(华为微信怎么上密码锁)

  • 闲鱼提现失败退回什么意思(闲鱼无法提现到支付宝)

    闲鱼提现失败退回什么意思(闲鱼无法提现到支付宝)

  • vivox20与vivox23区别(vivox20和vivox23)

    vivox20与vivox23区别(vivox20和vivox23)

  • 华为如何开启儿童模式(华为如何开启儿童锁)

    华为如何开启儿童模式(华为如何开启儿童锁)

  • ipad怎么扩大内存(ipad内存怎么扩大内存)

    ipad怎么扩大内存(ipad内存怎么扩大内存)

  • 苹果8plus充电多久能充满(苹果8plus充电多少w)

    苹果8plus充电多久能充满(苹果8plus充电多少w)

  • win10还原到某个时间点(win10还原系统怎么操作等了一天)

    win10还原到某个时间点(win10还原系统怎么操作等了一天)

  • 手机logging怎么关闭(手机log开关在哪里)

    手机logging怎么关闭(手机log开关在哪里)

  • 小米cc9pro下巴多宽(小米9下巴是几毫米)

    小米cc9pro下巴多宽(小米9下巴是几毫米)

  • 流量提醒在哪里设置(流量提醒在哪里打开)

    流量提醒在哪里设置(流量提醒在哪里打开)

  • 56视频怎么下载到电脑(56视频怎么下载到手机)

    56视频怎么下载到电脑(56视频怎么下载到手机)

  • oppo热点资讯怎么关(oppo热点资讯怎么关掉通知)

    oppo热点资讯怎么关(oppo热点资讯怎么关掉通知)

  • 一加7pro支持5g呢(一加7pro支持5gwifi吗)

    一加7pro支持5g呢(一加7pro支持5gwifi吗)

  • setup.exe是什么意思

    setup.exe是什么意思

  • Vue里父组件如何修改子组件样式(vue父组件如何调用子组件的方法组合式api)

    Vue里父组件如何修改子组件样式(vue父组件如何调用子组件的方法组合式api)

  • 六税一费优惠政策
  • 建筑公司跨区域迁入
  • 汽车申请报废了交强险能退吗
  • 利润分配转作股本股利
  • 工资的计提与结转怎么算
  • 外汇结汇成人民币违法吗
  • 收到商业承兑汇票到期,向银行办妥有关入账手续
  • 开票金额比实际金额多
  • 合并会计报表中的未分配利润反应的是什么
  • 资产负债表的日期可以是1月1日吗
  • 收到货款开的增值税发票怎么写分录
  • 报销数字证书续费作财务凭证怎么做?
  • 外资企业银行贷款限制
  • 设备安装增值税适用税率
  • 合同印花税如何做账
  • 售后返租税收规定
  • 非同一控制下投资收益怎么计算
  • 联营与参股公司的关系
  • 加计扣除两种情况
  • 公司收到个人投资款没有备注
  • 工资个人所得税标准表
  • 大巴车票抵扣税率
  • 补贴收入是否缴税
  • 增值税小规模纳税人减免增值税政策
  • 免费样品销售给客户计入什么科目
  • 路由器怎么重置网络
  • 财务管理终值和现值
  • 支付设备维修费用计入什么科目
  • 事业单位研究开题报告
  • 新手应该怎么样
  • macbook怎么设置输入法
  • linux format命令
  • 出差回来报销会务费
  • 生产员工福利计什么科目
  • 代开发票所需的资料?
  • 存货包括其他业务成本吗
  • 罗卡购物村
  • php下载文件夹
  • pdf在线预览备注
  • 餐厅手撕发票
  • phpcms怎么样
  • 基于python语言
  • 公司认缴的钱可以动吗
  • pytest conftest
  • 国家研发费用补助
  • 发票上的抵扣联抵扣联是什么意思
  • 发票有别的字迹有影响吗
  • 存货计提减值准备对所得税的影响
  • 预收账款的账务处理
  • 没有收到房租发票
  • 销货清单自己留哪一联
  • 收到多收的款会计处理
  • 应收账款周转率分析
  • 出口退税转为免税处理有损失吗
  • 建筑企业工程施工科目怎么结转
  • 机票行程单可以抵扣进项税吗?
  • 外资房地产企业 利润汇出比例
  • sql server使用的是什么逻辑模型
  • mysql+php
  • centos7如何扩展根分区空间
  • fedora s9
  • Win7中Remote Procedure Call(RPC)服务能关闭吗
  • bootcamp您的磁盘未能分区
  • win101909消费者版是什么意思
  • fsrec.sys
  • linux网络接口配置命令
  • win10下载英雄联盟运行没反应
  • linux计划任务如何设置
  • 常见的css样式
  • node:js
  • Node.js中的事件循环是什么
  • Node.js中的包管理工具是什么
  • 手机端apk反编译工具_android反编译工具
  • python字符类型有哪些
  • 重庆电子税务局官网登录入口
  • 浦发银行企业银行电话
  • 北京身份证网上换证流程
  • 城镇土地使用税会计分录
  • 安徽省纪检监察官网
  • 税务一般纳税人可以简易注销
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设