CODEWITHSUNDEEP
htmlcsshtml-table
user1429586
user1429586

Reputation: 45

How do I get 3 tables side by side

I am trying to align 3 tables side-by-side. It doesn't work when I put a table inside another table because the middle table has a lot of content which then makes my first table vertically too big and doesn't look right.

What I am trying to do is make a simple page where I have my first table with 3 rows down. My 2nd table is just a 1 column, 1 row layout for content and my 3rd table is also 1 column and 1 row. I need these tables to be side-by-side.

I have searched the web and cannot find anyone that can do this. When I add the tables they stack on top of each other. Can someone help me with getting my 3 tables to be side-by-side?

      <table width="100" border="1">
        <tr>
       <td>&nbsp;</td>
       </tr>
       <tr>
      <td>&nbsp;</td>
      </tr>
      <tr>
      <td>&nbsp;</td>
      </tr>
      </table>
      <table width="100" border="1">
      <tr>
      <td>&nbsp;</td>
      </tr>
      </table>
      <table width="100" border="1">
      <tr>
      <td>&nbsp;</td>
      </tr>
      </table>

If this needs CSS coding can you provide this as well, it would be much appreciated, I'm still learning advanced CSS and HTML.

Upvotes: 2

Views: 30039

Answers (5)

TheGenerousPriest
TheGenerousPriest

Reputation: 11

Since there has been changes in CSS and Flexbox, etc. There are a couple of ways.

  1. Wrap all the tables in a div.
<div class="main">
    <div id="table1">
        <table>
            <tr>
                <td>Content</td>
                <td>Content</td>
                <td>Content</td>
            </tr>
        </table>
    </div>
    <div id="table2">
        <table>
            <tr>
                <td>Content</td>
                <td>Content</td>
                <td>Content</td>
            </tr>
        </table>
    </div>
    <div id="table3">
        <table>
            <tr>
                <td>Content</td>
                <td>Content</td>
                <td>Content</td>
            </tr>
        </table>
    </div>
</div>

Then using a flex display on the main class, and then justify-content as follows:

.main {
    width: 1800px; //depending on how wide you want the table window
    min-height: 615px;  //same as width
    margin: 0 auto; //to center the content on your screen
    display: flex;
    justify-content: space-between;
}

This would separate your tables in one line.

  1. The other option is to use css grid, but won't get into that here. There are a bunch of tutorials online.

Upvotes: -1

rob
rob

Reputation: 1

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body>
<table width="900" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td>&nbsp;</td>
    <td rowspan="3">&nbsp;</td>
    <td rowspan="3">&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
  </tr>
</table>
</body>
</html>

how about this

Upvotes: 0

Scott Simpson
Scott Simpson

Reputation: 3850

If you have to use tables (and you do for things like HTML email), you should be able to accomplish most things with nesting tables. Have you tried using one wrapper table with three cells, then putting your three tables each inside one of the cells from the wrapper table? Dreamweaver is a really good tool for tables. If this is not tabular data, or an HTML email, you should consider a layout not based on tables.

Upvotes: 1

gherkins
gherkins

Reputation: 14973

(advanced) CSS:

table{
 float:left;
}

Upvotes: 1

septemberbrain
septemberbrain

Reputation: 1008

Add style="float:left;" to each table. eg:

<table width="100" border="1" style="float:left;">

Upvotes: 11

Related Questions