使用 html 垂直对齐表格

问题描述 投票:0回答:1

如何垂直对齐表格?

这样

546号

彩票1

在链接元素列下对齐

547号

抽奖2

属于“链接元素1”列下

548号

彩票3

属于链接元素2

https://onecompiler.com/html/3zyvupx94

<html>
   <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
      </=
      head>
   <body>
      <br>
      <html>
         <body>
            <br><br><br>
            <table width="300" table-layout:fixed border="1">
               <tr>
                  <td>
                     <table width="300" table-layout=fixed border="0" rules="none">
                        <tr> Linked Element</tr>
                        <tr>
                           <td><img src="img_girl.jpg" height="180" width="180" border="0"></td>
                        </tr>
                        <tr>
                           <td>  546 Lottery 1</td>
                        <tr>
                     </table>
                  </td>
                  <br>
                  <br>
                  <td>
                     <table width="300" table-layout=fixed border="0" rules="none">
                        <tr> Linked Element1</tr>
                        <tr>
                           <td><img src="img_girl.jpg" height="180" width="180" border="0"></td>
                        </tr>
                        <tr>
                           <td>  547 Lottery 1</td>
                        <tr>
                     </table>
                  </td>
                  <br>
                  <br>
                  <td>
                     <table width="300" table-layout=fixed border="0" rules="none">
                        <tr> Linked Element2</tr>
                        <tr>
                           <td><img src="img_girl.jpg" height="180" width="180" border="0"></td>
                        </tr>
                        <tr>
                           <td>  548 Lottery 1</td>
                        <tr>
                     </table>
                  </td>
                  <br>
                  <br>
                  <table width="300" border="1" cellspacing="0" cellpadding="0">
                     <tbody>
                        <tr>
                           <td> Number 546</td>
                        </tr>
                        <tr>
                           <td> Lottery 1</td>
                        </tr>
                     </tbody>
                  </table>
                  <table width="300" border="1" cellspacing="0" cellpadding="0">
                     <tbody>
                        <tr>
                           <td> Number 547</td>
                        </tr>
                        <tr>
                           <td> Lottery 1</td>
                        </tr>
                     </tbody>
                  </table>
                  <table width="300" border="1" cellspacing="0" cellpadding="0">
                     <tbody>
                        <tr>
                           <td> Number 548</td>
                           </tr>
                        <tr>
                           <td> Lottery 1</td>
                        </tr>
                     </tbody>
                  </table>
               </tr>
            </table>
         </body>
      </html>
html css html-table
1个回答
0
投票

要垂直对齐表格,您需要以每个“链接元素”及其相应的“数字”和“彩票”位于同一表格单元格中的方式构建 HTML (

<td>
)。

<html>
   <body>
      <table width="900" border="1" cellspacing="0" cellpadding="0">
         <tr>
            <td>
               <table width="300" border="0" rules="none">
                  <tr><td>Linked Element</td></tr>
                  <tr><td><img src="img_girl.jpg" height="180" width="180" border="0"></td></tr>
                  <tr><td>Number 546</td></tr>
                  <tr><td>Lottery 1</td></tr>
               </table>
            </td>
            <td>
               <table width="300" border="0" rules="none">
                  <tr><td>Linked Element1</td></tr>
                  <tr><td><img src="img_girl.jpg" height="180" width="180" border="0"></td></tr>
                  <tr><td>Number 547</td></tr>
                  <tr><td>Lottery 2</td></tr>
               </table>
            </td>
            <td>
               <table width="300" border="0" rules="none">
                  <tr><td>Linked Element2</td></tr>
                  <tr><td><img src="img_girl.jpg" height="180" width="180" border="0"></td></tr>
                  <tr><td>Number 548</td></tr>
                  <tr><td>Lottery 3</td></tr>
               </table>
            </td>
         </tr>
      </table>
   </body>
</html>

在此代码中,每个“链接元素”、“数字”和“彩票”位于同一表格单元格 (

<tr>
) 内的单独行 (
<td>
) 中。外表具有三个单元格,每个单元格对应“链接元素”。这将根据您的需要垂直对齐表格。

© www.soinside.com 2019 - 2024. All rights reserved.