如何通过单个table参数实现HTML表格所有列内容居中对齐
有两种可直接在表格代码开头配置的方案,都不需要单独为每个单元格设置对齐属性:
方案1:仅修改<table>标签属性(推荐,改动最小)
直接在<table>标签内添加style="text-align:center"属性即可,所有子单元格会自动继承该对齐规则。
修改后的示例代码如下:
<table border="1" style="text-align:center"> <TR> <TD>1</TD> <TD>2</TD> <TD>3</TD> <TD>4</TD> </TR> <TR> <TD>1aaaaaa</TD> <TD>2aaaaa</TD> <TD>3aaaaa</TD> <TD>4aaaa</TD> </TR> </table>
注:如果需要让表格本身在父容器中也居中,可额外在<table>标签添加align="center"属性,该属性对老旧浏览器兼容性更好。
方案2:全局统一配置(适合页面内有多个表格的场景)
如果需要让页面内所有表格都默认内容居中,可以在表格代码前添加一段内嵌样式:
<style> table td { text-align: center; } </style> <table border="1"> <!-- 原有表格内容无需修改 --> </table>
添加后所有后续表格的单元格内容都会自动居中,不需要再单独配置每个表格的属性。
内容的提问来源于stack exchange,提问作者FlyingZebra1
相关产品推荐
相关产品推荐

