Question:

How to place multiple html tables on ?

by  |  earlier

0 LIKES UnLike

I have a basic code such as this:

<html>

<body>

<table width="100" border="2">

<tr>

<td>sd

safsdafsdfasadfsafad

</td>

</tr>

</table>

<table width="100" border="2">

<tr>

<td>

safsdfadgadfgasdfa

</td>

</tr>

</table>

</body>

</html>

With this code, I will get to tables, stacked on top of eachother. I would like to know how to keep multiple table on one line. Please only html, it's all I know.

 Tags:

   Report

6 ANSWERS


  1. Easiest thing to do is to create a table with two cells, and embed a table in each cell.


  2. &lt;table id=&quot;container&quot; width=&quot;100%&quot; border=&quot;0&quot; cellspacing=&quot;0&quot; cellpadding=&quot;0&quot;&gt;

      &lt;tr&gt;

        &lt;td&gt;&lt;table width=&quot;100%&quot; border=&quot;1&quot; cellpadding=&quot;0&quot; cellspacing=&quot;0&quot; bordercolor=&quot;#CCCCCC&quot;&gt;

          &lt;tr&gt;

            &lt;td bgcolor=&quot;#CCCCCC&quot;&gt;Table 1&lt;/td&gt;

          &lt;/tr&gt;

          &lt;tr&gt;

            &lt;td&gt; &lt;/td&gt;

          &lt;/tr&gt;

      

        &lt;/table&gt;&lt;/td&gt;

        &lt;td&gt;&lt;table width=&quot;100%&quot; border=&quot;1&quot; cellpadding=&quot;0&quot; cellspacing=&quot;0&quot; bordercolor=&quot;#3399CC&quot;&gt;

          &lt;tr&gt;

            &lt;td bgcolor=&quot;#3399CC&quot;&gt;Table 2&lt;/td&gt;

          &lt;/tr&gt;

          &lt;tr&gt;

            &lt;td&gt; &lt;/td&gt;

          &lt;/tr&gt;

          

        &lt;/table&gt;&lt;/td&gt;

        &lt;td&gt;&lt;table width=&quot;100%&quot; border=&quot;1&quot; cellpadding=&quot;0&quot; cellspacing=&quot;0&quot; bordercolor=&quot;#CCCC99&quot;&gt;

          &lt;tr&gt;

            &lt;td bgcolor=&quot;#CCCC99&quot;&gt;Table 3&lt;/td&gt;

          &lt;/tr&gt;

          &lt;tr&gt;

            &lt;td&gt; &lt;/td&gt;

          &lt;/tr&gt;

          

        &lt;/table&gt;&lt;/td&gt;

        &lt;td&gt;&lt;table width=&quot;100%&quot; border=&quot;1&quot; cellpadding=&quot;0&quot; cellspacing=&quot;0&quot; bordercolor=&quot;#FFCC00&quot;&gt;

          &lt;tr&gt;

            &lt;td bgcolor=&quot;#FFCC00&quot;&gt;Table 4&lt;/td&gt;

          &lt;/tr&gt;

          &lt;tr&gt;

            &lt;td&gt; &lt;/td&gt;

          &lt;/tr&gt;

          

        &lt;/table&gt;&lt;/td&gt;

      &lt;/tr&gt;

      

    &lt;/table&gt;


  3. &lt;table&gt;  &lt;!-- First Table --&gt;

      &lt;tr&gt;

        &lt;td&gt;

          &lt;table&gt;  &lt;!-- Second Table, but in the first td&gt;

            &lt;tr&gt;

              &lt;td&gt;

              &lt;/td&gt;

            &lt;/tr&gt;

          &lt;/table&gt;

        &lt;/td&gt;

      &lt;/tr&gt;

    &lt;/table&gt;

    Sorry I did put formatting in but Yahoo stripped it out... basically you want the second table inside the first table&#039;s td.

    &lt;table name=&quot;table 1&quot;&gt;&lt;tr&gt;&lt;td&gt;&lt;table name=&quot;table 2&quot;&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;

  4. Sorry.  Easier to do it with some CSS thrown in:

    &lt;div style=&quot;width: 70%; margin: 0 auto;&quot;&gt;

    &lt;table style=&quot;float: left; width: 100px; border: 2px solid #0f0;&quot; summary&quot;Table One&quot;&gt;

    &lt;tr&gt;

    &lt;td&gt;sdsafsdafsdfasadfsafad&lt;/td&gt;

    &lt;/tr&gt;

    &lt;/table&gt;

    &lt;table style=&quot;float: right; width: 100px; border: 2px solid #0f0;&quot; summary&quot;Table Two&quot;&gt;

    &lt;tr&gt;

    &lt;td&gt;

    safsdfadgadfgasdfa&lt;/td&gt;

    &lt;/tr&gt;

    &lt;/table&gt;

    &lt;/div&gt;

    That gives your tables a green border (#0f0, but change as needed) and the tables are at left and right of centered container div. To add borders for individual cells, you will need to style the td tags.  Easier to use embedded styling since you may have lots of td tags:

    &lt;head&gt;

    &lt;style type=&quot;text/css&quot;&gt;

    td { border: 2px solid #0f0; }

    &lt;/style&gt;

    &lt;/head&gt;

    If you decide to use embedded style to get your td borders, then you can also remove the styling from all table tags that have identical styling and use this:

    &lt;head&gt;

    &lt;style type=&quot;text/css&quot;&gt;

    table { width: 100px; border: 2px solid #0f0;}

    td { border: 2px solid #0f0; }

    &lt;/style&gt;

    &lt;/head&gt;

    Then each table will just have their own float styling and rest of styling will be done by the styling tags between your head tags.

    Keep it simple.  DON&#039;T nest tables.

    Ron

  5. Use &lt;div&gt; tags and float right and left... google it

  6. try &lt;br&gt; after code

Question Stats

Latest activity: earlier.
This question has 6 answers.

BECOME A GUIDE

Share your knowledge and help people by answering questions.