CODEWITHSUNDEEP
html
Pita
Pita

Reputation: 508

tables and spacing

I have created a couple of tables. now i need both tables to be next to each other and not one table on top of each other. how can i position the second table next to the first one (to the right) but with sufficient space in between?

this is some code of my second table:

<table>
<h3>Personaldaten</h3>
<tr>
    <td>Externe Referenz:</td>
    <td colspan="2">
       <input class="LargeText" type="text" style="width: 150%">
    </td>
</tr>

<tr>
    <td>Titel:</td>
    <td colspan="2">
        <input class="LargeText" type="text" style="width: 150%">
    </td>
</tr>

above are 2 entities from the first table, how do i proceed like this?

Upvotes: 0

Views: 111

Answers (7)

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201568

First, fix the syntax and styling. A table element cannot have an h3 child. Either put the h3 inside a cell (which is inside a tr), or turn it to a caption. Don’t set a width of 150%, as this would make the a cell occupy 150% of the width of the available space. The width of an input field set is best set in characters, using the size attribute in HTML.

Then you can float the tables in CSS as suggested in other answers, or by using align=left in table tags. To create horizontal spacing between the tables, you can set e.g. margin-right on the first table.

Note that for usability and accessibility, forms should normally be presented so that there is one input item with its label on one line, so that filling out the form proceeds vertically in a simple manner. So you might be solving the wrong problem.

Upvotes: 0

WolvDev
WolvDev

Reputation: 3226

Try to use a wrapper around the tables and use float:left;

//margin: top right bottom left
<div style="width:500px; margin: 30px 0px 0px 320px">
    <table style="width:240px; float:left; margin-right:20px;">
    </table>
    <table style="width:240px; float:left;">
    </table>
</div>

Upvotes: 1

uınbɐɥs
uınbɐɥs

Reputation: 7341

Either use float: left or display: inline-block.

#1:

table {
    margin: 10px;
    float: left
}

#2:

table {
    margin: 10px;
    display: inline-block
}

See http://shaquin.tk/experiments/tables2.html and http://shaquin.tk/experiments/tables3.html.

Upvotes: 0

Nathan White
Nathan White

Reputation: 1080

If it were me, I would surround your tables in a div layer, specifying the width and height of the div layer to force the tables next to each other.

For example:

<div id="tablecontainer">
<table id="lefttable"></table>
<table id="righttable"></table>
</div>

And in the CSS:

table
{
margin: 5px;
}

#lefttable
{
float: left;
}

Obviously, this code isn't going to be exactly what OP wants, but you get the idea.

Upvotes: 0

Buzz
Buzz

Reputation: 264

You can create a new table with 1 row and 2 columns and place your first table inside the first column and your second table inside the second column.That way both tables can be displayed side by side

Upvotes: 0

Rob Forrest
Rob Forrest

Reputation: 7450

You have two choices really.

If you're happy creating your layout with tables, then put both of your tables within another table. i.e.

<table>
  <tr>
    <td>
      <table>{ table 1 stuff }</table>
    </td>
    <td>
      <table>{table 2 stuff }</table>
    </td>
  </tr>
</table>

Or you can start looking into 'float'ing your elements.

Upvotes: 0

user818991
user818991

Reputation:

get rid of your absolute positioning if you don't really need it and use CSS like

table{
float:left;
margin:0px 5px;
}

Upvotes: 0

Related Questions