位置: 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)

  • iphone热点频段怎么改(苹果手机热点怎么设置2.4g频段)

    iphone热点频段怎么改(苹果手机热点怎么设置2.4g频段)

  • ios13能清空流量统计吗(ios怎么清除流量数据)

    ios13能清空流量统计吗(ios怎么清除流量数据)

  • 苹果11手电筒的关闭方法是什么(iphone11手电筒没办法用)

    苹果11手电筒的关闭方法是什么(iphone11手电筒没办法用)

  • 小米耳机连接不上手机(小米耳机连接不上手机蓝牙)

    小米耳机连接不上手机(小米耳机连接不上手机蓝牙)

  • 华为原装充电线怎么区分(华为原装充电线多少钱)

    华为原装充电线怎么区分(华为原装充电线多少钱)

  • 微信好友详细资料更多出现店的标识是怎么回事(微信好友详细资料里面有电话号码)

    微信好友详细资料更多出现店的标识是怎么回事(微信好友详细资料里面有电话号码)

  • 耳机充电仓红灯闪烁(耳机充电仓红灯一直闪烁)

    耳机充电仓红灯闪烁(耳机充电仓红灯一直闪烁)

  • vivo怎么免密安装(vivo怎么免密安装应用)

    vivo怎么免密安装(vivo怎么免密安装应用)

  • qq3g在线到底在不在线(手机qq3g在线是什么意思)

    qq3g在线到底在不在线(手机qq3g在线是什么意思)

  • 小米八青春版支持18瓦快充吗(小米八青春版支持OTG吗)

    小米八青春版支持18瓦快充吗(小米八青春版支持OTG吗)

  • 华为m6怎么调节分辨率(华为m6怎么调整屏幕)

    华为m6怎么调节分辨率(华为m6怎么调整屏幕)

  • 苹果手机拍照如何静音(苹果手机拍照如何美颜)

    苹果手机拍照如何静音(苹果手机拍照如何美颜)

  • 抖音可以挂拼多多吗(抖音挂拼多多店铺需要什么条件?)

    抖音可以挂拼多多吗(抖音挂拼多多店铺需要什么条件?)

  • 小米6x手机放大镜在哪里(小米6手机放大器在哪里打开)

    小米6x手机放大镜在哪里(小米6手机放大器在哪里打开)

  • iqooneo支持无线充电吗(iqooneo5支持无线充电)

    iqooneo支持无线充电吗(iqooneo5支持无线充电)

  • 无权拨打该号码是什么意思(无权拨打该号码是警察的号码)

    无权拨打该号码是什么意思(无权拨打该号码是警察的号码)

  • mipay怎么用来刷公交(mipay怎么用来刷公交刷不了)

    mipay怎么用来刷公交(mipay怎么用来刷公交刷不了)

  • 苹果手机电池标志怎么变黄了(苹果手机电池标志变白色了)

    苹果手机电池标志怎么变黄了(苹果手机电池标志变白色了)

  • 如何删除手机新闻资讯(如何删除手机新闻动态)

    如何删除手机新闻资讯(如何删除手机新闻动态)

  • wps文档怎么换行打字(电脑wps文档没保存怎么找回)

    wps文档怎么换行打字(电脑wps文档没保存怎么找回)

  • 快手瘦脸功能在哪里(快手的瘦脸功能在哪里能找到)

    快手瘦脸功能在哪里(快手的瘦脸功能在哪里能找到)

  • 腾讯云Linux系统怎么挂载磁盘?(腾讯云centos5.8)

    腾讯云Linux系统怎么挂载磁盘?(腾讯云centos5.8)

  • Ose.exe是什么进程?Ose.exe是病毒吗?如何识别?Ose.exe程序文件介绍(assoc .exe=exefile是什么)

    Ose.exe是什么进程?Ose.exe是病毒吗?如何识别?Ose.exe程序文件介绍(assoc .exe=exefile是什么)

  • H5外部浏览器直接调起微信——通过url协议 weixin:// 判断是否安装微信及启动微信(支持h5浏览器)

    H5外部浏览器直接调起微信——通过url协议 weixin:// 判断是否安装微信及启动微信(支持h5浏览器)

  • vue 遍历数组(vue遍历数组)

    vue 遍历数组(vue遍历数组)

  • 小规模差额征税会计分录实例
  • 未达起征点销售额和小微企业免税销售额
  • 年初建账考虑要点有哪些
  • 工资薪金需要缴纳什么税种
  • 企业减免税享受什么
  • 营改增之后建筑企业哪些税可以抵扣
  • 所得税汇算清缴账务处理
  • 取得与收益相关的政府补助会计分录
  • 增值税普通发票需要交税吗
  • 红字发票信息表是销方还是购方开
  • 物业管理费属于应付账款吗
  • 无形资产软件摊销年限的最新规定2021
  • 进项大于销项怎么做账
  • 金融企业呆账准备金是否允许补提
  • 公司出租商铺要交哪些税
  • 固定资产内部转移单
  • 员工股权激励会计处理分录
  • 子公司借款给母公司是否受2:1
  • 员工宿舍水电费计入什么会计科目
  • 电脑重装系统启动
  • 办公家具折旧年限及计算方法
  • 收到服务费的发票怎么做
  • 网速变慢了
  • 企业汇算清缴怎么退税
  • u盘格式化技巧
  • 员工报销电话费缴纳个税
  • 会计账簿的登记
  • yii框架文档
  • 当月已验旧的发票怎么开
  • yolov1训练过程
  • php静态方法和非静态方法
  • 如何使用vue
  • css实现文字颜色渐变
  • js面试2021
  • 实现视图
  • audit result
  • 工资计提发放会计科目
  • 调整以前年度亏损
  • 织梦百科
  • 个体户电子申报税流程
  • 单一窗口出口报关流程
  • 小规模纳税人与一般纳税人的区别表现在小规模纳税人
  • 预付费卡开票
  • 预收一年房租的会计科目
  • 增值税专用发票查询系统官方网站
  • 允许在企业所得税税前扣除的
  • 可供出售金融资产名词解释
  • 自行申报啥意思
  • 企业做税务局迁移应该做哪些事情
  • 政府专项资金补助计入什么科目
  • 应收账款计提减值准备会计处理
  • 公司突然改变工资结构
  • 保险赔偿收入如何减税额
  • 生产成本的主要构成要素
  • 进项税转出补缴增值税 城建税及两费
  • 关于小规模纳税人2023年的政策
  • 股票增发给谁
  • 在建工程预付款授信
  • mysql字符集设置命令
  • linux系统转换为win系统脚本
  • solaris删除文件夹命令
  • win7系统如何隐藏任务栏
  • [下载转存] 经验本题库源文件下载转存 秒结
  • 如何设置虚拟内存大小
  • os x10.8.5
  • win8补丁官网
  • 斗西游破解版
  • 安卓软件集
  • perl-v
  • 批处理常用命令总结
  • HTML <!DOCTYPE> 标签
  • 微信小程序实战入门 第2版
  • 简述javascript的主要特点
  • unity引擎叫什么
  • 2016年最火的歌曲排行榜前十名
  • 全国国税税务机关是哪里
  • 最新印花税税目表2022
  • 深圳国家税务总局
  • 小规模纳税人销售货物税率是多少
  • 增值税发票开具后多长时间可在查询平台查询到?
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设