howto put HTML tables side by side

**cofactor** · 08-10-2012 05:33 AM

How do I put two HTML tables side by side, centered on the page.(little gap in between)

**Calman** · 08-10-2012 02:08 PM

Hi cofactor,

Should be easily achieved, although some of the pros may have better methods than this example:

<div align="center">
<TABLE BORDER="1" WIDTH="500">
<TR>
<TD WIDTH=250>
<TABLE BORDER="1" WIDTH="250">
<TR>
<TD align="middle">
This is in our first table!
</TD>
</TR>
</TABLE>
</TD>
<TD WIDTH="250">
<TABLE BORDER="1">
<TR>
<TD align="middle" WIDTH="250">
And this is in the second table!
</TD>
</TR>
</TABLE>
</TD>
</TR>
</TABLE>
</div>

Hope this helps,
All the best,
Cal

**absolutmgd13** · 08-13-2012 12:06 PM

heres another method:

HTML Code:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<div style="width:610px;height:auto;position:relative;">
<table width="300" border="0" align="left" cellpadding="0" cellspacing="0" style="margin-right:10px;">
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>

<table width="300" border="0" align="left" cellpadding="0" cellspacing="0">
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>
</div>
</body>
</html>

**seoleader** · 08-14-2012 04:37 AM

Make a master table, divide it in 3 blocks and adjust you two tables in left and right blocks.
maintain center block according to the spacing you require.

**jeffreydominic** · 08-14-2012 07:21 AM

You can make the table to float by using float in css or else you can use inline function too

**roma123** · 08-18-2012 12:37 AM

All other ideas are really appreciable...I think you first arrange 2 divs side by side like you want..and then in each div put the tables..

**polyglot** · 08-19-2012 09:31 PM

Originally Posted by roma123

All other ideas are really appreciable...I think you first arrange 2 divs side by side like you want..and then in each div put the tables..

Here is one possible solution:

Flexible "Float Box Left" Layout

This method produces a flexible layout -- fills the screen at different resolutions.
And, especially for cofactor - check the source code and feel free to use any markup if you wish.

HTML 5 Polyglot (html+xhtml) page

P

Thread: howto put HTML tables side by side

Thread Tools

Display

howto put HTML tables side by side

Arranging table

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions