Align tables vertically using html

Tanu
January 9, 2024
192 views
3 votes
4 Answers

How can I align the tables vertically ?

so that

Number 546

Lottery 1

aligns under the column Linked Element

Number 547

Lottery 2

falls under the column Linked Element1

Number 548

Lottery 3

falls under the column Linked Element2

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>

Answers

To align the tables vertically, you need to structure your HTML in a way that each "Linked Element" and its corresponding "Number" and "Lottery" are in the same table cell (<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>

In this code, each "Linked Element", "Number", and "Lottery" are in separate rows (<tr>) within the same table cell (<td>). The outer table has three cells, one for each "Linked Element". This will align the tables vertically as you wanted.

Using css- Set float:left on the divs so they align horizontally
Add some margin-right space between the divs.

Here is the updated code: https://onecompiler.com/html/3zyvxa8p9

<!DOCTYPE html>
<html>
<head>
<style>

.table-group {
  float: left;  
  margin-right: 50px;
}

</style>
</head>
<body>

<div class="table-group">

<table width="300" border="1">
  <tr>
    <td>Linked Element</td>
  </tr>
</table>

<table width="300" border="1">
  <tbody>
    <tr>
      <td>Number 546</td>
    </tr>
    <tr>
      <td>Lottery 1</td>
    </tr>
  </tbody>
</table>

</div>

<div class="table-group">

<table width="300" border="1">
  <tr>
    <td>Linked Element 1</td> 
  </tr>
</table>

<table width="300" border="1">
  <tbody>
    <tr>
      <td>Number 547</td>
    </tr>
    <tr>  
      <td>Lottery 2</td>
    </tr>
  </tbody>  
</table>

</div>

<div class="table-group">

<table width="300" border="1">
  <tr>
    <td>Linked Element 2</td>
  </tr>    
</table>

<table width="300" border="1">
  <tbody>
    <tr>
      <td>Number 548</td>
    </tr>
    <tr>
      <td>Lottery 3</td> 
    </tr>
  </tbody>
</table>

</div>

</body>
</html>

Assalam Alaikum.
I understand you want a flexible schedule. If so, it’s very easy. css will help you for this.

table {
            width: 100%;
            border-collapse: collapse;
            margin-bottom: 20px;
        }

        th, td {
            border: 1px solid #dddddd;
            text-align: left;
            padding: 8px;
        }

        th {
            background-color: #f2f2f2;
        }

        /* Media query for responsive design */
        @media screen and (max-width: 600px) {
            table {
                border: 1px solid #dddddd;
            }

            th, td {
                width: 100%;
                display: block;
            }

            th, td {
                text-align: left;
            }

            tbody {
                display: block;
                width: 100%;
                overflow-x: auto;
            }
        }

 <table>
        <thead>
            <tr>
                <th>Header 1</th>
                <th>Header 2</th>
                <th>Header 3</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Data 1</td>
                <td>Data 2</td>
                <td>Data 3</td>
            </tr>
            <tr>
                <td>Data 4</td>
                <td>Data 5</td>
                <td>Data 6</td>
            </tr>
        </tbody>
    </table>

* {
  box-sizing: border-box;
}

body {
  color: #555;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

hr {
  margin: 50px 0 30px;
}

.container {
  margin: 40px auto;
  width: 600px;
}

table {
  border: 1px solid grey;
  width: 100%;
  background-color: #eee;
}

tr {
  width: 100%;
}

td {
  height: 200px;
  border: 1px solid grey;
  padding: 15px;
  width: 50%;
}
/* vertical-align-specific styles start here */

td.middle {
  vertical-align: middle;
}

td.top {
  vertical-align: top;
}

td.bottom {
  vertical-align: bottom;
}

<div class="container">
  <table>
    <tr>
      <td>default vertical alignment for a <code>td</code> is <code>middle</code>.</td>
      <td class="top">vertical-align: top;</td>
    </tr>
    <tr>
      <td class="middle">vertical-align: middle;</td>
      <td class="bottom">vertical-align: bottom;</td>
    </tr>
  </table>
</div>

Please signup or login to give your own answer.

Click here to cancel reply.