居中对齐HTML表格 [英] Center-align a HTML table

问题描述

在我目前正在处理的一个页面上，我似乎无法将一张表格放在第一行和两列文本下方的图像中（两列不应该更多比图片的宽度）
这是网页： http：// www.puzzles-et-jeux.com/fr/page/minipuzzles.html
我花了很多时间试图解决这个问题。
我想保留它在HTML中，因为我必须赶时间，还因为我必须为每个图像创建20页不同宽度/布局的页面。

解决方案

对于您的设计，通常使用div而不是表格。这样，通过适当的样式，您的布局将更易于维护和更改。这确实需要一些习惯，但从长远来看，它会帮助你一大堆，你会学到很多关于样式如何工作的知识。但是，我会为您提供解决手头问题的解决方案。

在样式表中，您将边距和填充设置为0像素。这会覆盖您的 align =center属性。我建议将这些设置从CSS中取出，因为您通常不希望所有元素都以这种方式受到影响。如果您已经知道CSS中发生了什么，并且希望保持这种状态，那么您必须将样式应用于表格以覆盖先前的设置。你可以给表格一个 class ，或者你可以用HTML内联样式。以下是两种选择：

1. 有了课程：
   
   

   < table class =centerTable>< / table>

在你的style.css文件中，你会有这样的内容：

  .centerTable {margin：0px auto; } 
  

2. 
   
   

   < table style =margin：0px auto;>< / table>

如果您决定消除边距和填充设置为0px，则可以将对齐=center，您可以在< td> 标签上找到想要对齐的任何列。

On a page I'm working on at the moment, I can't seem to be able to center a table with an image in the first row and two columns of text below it (the two columns shouldn't be more than the image's width) Here's the page : http://www.puzzles-et-jeux.com/fr/page/minipuzzles.html I spent a lot of time trying to solve this. I would like to keep it in HTML because I have to rush and also because I have to create 20 pages of the sort with different widths /+ layouts for each image.

解决方案

For your design, it is common practice to use divs rather than a table. This way, your layout will be more maintainable and changeable through proper styling. It does take some getting used to, but it will help you a ton in the long run and you will learn a lot about how styling works. However, I will provide you with a solution to the problem at hand.

In your stylesheets you have margins and padding set to 0 pixels. This overrides your align="center" attribute. I would recommend taking these settings out of your CSS as you don't normally want all of your elements to be affected in this manner. If you already know what's going on in the CSS, and you want to keep it that way, then you have to apply a style to your table to override the previous sets. You could either give the table a class or you can put the style inline with the HTML. Here are the two options:

1. With a class:

   <table class="centerTable"></table>

In your style.css file you would have something like this:

.centerTable { margin: 0px auto; }

2. Inline with your HTML:

   <table style="margin: 0px auto;"></table>

If you decide to wipe out the margins and padding being set to 0px, then you can keep align="center" on your <td> tags for whatever column you wish to align.

这篇关于居中对齐HTML表格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！