并排创建3个小型表格 [英] Creating 3 small tables side by side centered

问题描述

我试图在页面中居中创建3个并排的小桌子。到目前为止我有以下代码，但它不起作用。我打算试图弄清楚如何做到这一点，它看起来很简单，但它不是，至少对我来说不是。有人能帮我解决这个问题吗？

 < table align =center>我已经附加了一张图片以及我正在创建的图片。 < TR>< TD> 
< table border =1> 
< tr> 
< td> Test 1< / td> 
< / tr> 
< / table> 
 
< / td>< td> 
< table border =1> 
< tr> 
< td> test 2< / td> 
< / tr> 
< / table> 
< td>< / td> 
< table border =1> 
< tr> 
< td> test 3< / td> 
< / tr> 
< / table> 
< / td>< / tr>< / table> 
  

解决方案

正如指出的那样，问题是由错字造成的。我的想法是删除父表并使用 display：inline-table 排列它们，然后 text-align：center 放在一个容器上以居中放置。

远离嵌套表格会产生更多可读的标记。另外，边界属性应该被删除并用CSS创建。

.wrap {text-align：center;} table {display：inline-table; border-collapse：collapse;} td {border：solid 1px #CCC; padding：10px;}

< div class =wrap > <表> < TR> < td>测试1< / td> < / TR> < /表> <表> < TR> < td>测试2< / td> < / TR> < /表> <表> < TR> < td> Test 3< / td> < / TR> < / table>< / div>

I am trying to create 3 small tables side by side that are centered in the page. I have the following code so far but it doesn't work. I'm breaking my head trying to figure out how to do this and it seems like it would be simple, but its not, at least for me its not. Can someone please help me out with this. I have attached an image as well as to what i am trying to create.

<table align="center"><tr><td>
<table border="1">
    <tr>
    <td>Test 1</td>
    </tr>
</table>

</td><td>
<table border="1">
    <tr>
    <td>test 2</td>
    </tr>
</table>
<td></td>
<table border="1">
    <tr>
    <td>test 3</td>
    </tr>
</table>
</td></tr></table>

解决方案

The problem is caused by a typo, as pointed out. My idea would be to remove the parent table and use display: inline-table to line them up and then text-align: center on a container to center them.

Moving away from nested tables results in much more readable markup. Also, the border attribute should be removed and created in CSS instead.

.wrap {
  text-align: center;
}

table {
  display: inline-table;
  border-collapse: collapse;
}

td { 
  border: solid 1px #CCC;
  padding: 10px;
}

<div class="wrap">
  <table>
    <tr>
      <td>Test 1</td>
    </tr>
  </table>


  <table>
    <tr>
      <td>Test 2</td>
    </tr>
  </table>

  <table>
    <tr>
      <td>Test 3</td>
    </tr>
  </table>
</div>

这篇关于并排创建3个小型表格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！