在HTML中,要让table居中显示,可以使用CSS样式来实现,具体操作如下:
(图片来源网络,侵删)
1、创建一个HTML文件,并在文件中插入一个table元素。
<!DOCTYPE html> <html> <head> <style> </style> </head> <body> <table id="myTable"> <tr> <th>标题1</th> <th>标题2</th> </tr> <tr> <td>内容1</td> <td>内容2</td> </tr> </table> </body> </html>
2、接下来,在<style>
标签内添加CSS样式,设置table的居中显示,这里有两种方法可以实现:使用margin: auto;
和使用textalign: center;
,下面分别介绍这两种方法。
方法一:使用margin: auto;
#myTable { width: 50%; /* 设置table宽度为50% */ margin: auto; /* 设置左右外边距为auto,实现水平居中 */ }
方法二:使用textalign: center;
#myTable { width: 50%; /* 设置table宽度为50% */ textalign: center; /* 设置表格内容居中 */ }
3、将上述CSS样式添加到HTML文件中的<style>
标签内,完整的HTML文件如下:
<!DOCTYPE html> <html> <head> <style> #myTable { width: 50%; /* 设置table宽度为50% */ margin: auto; /* 设置左右外边距为auto,实现水平居中 */ } </style> </head> <body> <table id="myTable"> <tr> <th>标题1</th> <th>标题2</th> </tr> <tr> <td>内容1</td> <td>内容2</td> </tr> </table> </body> </html>
4、保存HTML文件,然后在浏览器中打开该文件,可以看到table已经居中显示,如果需要调整table的宽度,可以修改CSS样式中的width
属性值,将宽度设置为80%,则将CSS样式修改为:
#myTable { width: 80%; /* 设置table宽度为80% */ margin: auto; /* 设置左右外边距为auto,实现水平居中 */ }
以上就是在HTML中让table居中显示的方法,通过使用CSS样式,可以轻松实现各种布局效果,提高网页的美观性和易用性。
本文来自投稿,不代表重蔚自留地立场,如若转载,请注明出处https://www.cwhello.com/440002.html
如有侵犯您的合法权益请发邮件951076433@qq.com联系删除