7 Replies Latest reply: Nov 12, 2014 3:54 AM by MurraySummers RSS

    How i Insert a Table alongside another Table??

    FurqanHanif Community Member
    FurqanHanif Nov 11, 2014 7:48 PM

      I Want to insert another Table alongside a Table, but When i try to Do That it Insert Table Downward instead of inserting table alongside that Another Table, So how i Do it??

      Like in Pic i want to insert table in the Highlighted Area .

      (Sorry For my Bad English)

      2014-11-12_084159.png

      • 97 Views
      • Categories: Learn Dreamweaver
      • Tags:
        • 1. Re: How i Insert a Table alongside another Table??
          mytaxsite.co.uk CommunityMVP
          mytaxsite.co.uk Nov 11, 2014 7:57 PM (in response to FurqanHanif)

          You can put the tables in their own DIVs like this:

           

          <div style="float:left; min-width:400px;border:1px #cccccc solid; border-collapse:collapse;margin-right: 15px;">Put your table 1 here</div>

          <div style="float:left;min-width:400px;border:1px #cccccc solid; border-collapse:collapse;">Put your table 2 here</div>

          • 2. Re: How i Insert a Table alongside another Table??
            FurqanHanif Community Member
            FurqanHanif Nov 11, 2014 10:16 PM (in response to mytaxsite.co.uk)

            Will You Please Tell me where i put this Code ??? i am a Beginner... i want to make another table Alongside the Colapsible panel(table1)..

             

            <!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>

            <script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>

             

             

            <link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />

            <script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>

            <script src="SpryAssets/SpryCollapsiblePanel.js" type="text/javascript"></script>

            <style type="text/css">

            <!--

            body {

            width : 960px;

            margin:auto;

            }

            .style5 {

              font-family: Georgia, "Times New Roman", Times, serif;

              font-style: italic;

              font-weight: bold;

              border-bottom-color: #0033FF;

            }

            -->

            </style>

            <link href="SpryAssets/SpryCollapsiblePanel.css" rel="stylesheet" type="text/css" />

            <style type="text/css">

            <!--

            .style6 {

              font-family: Georgia, "Times New Roman", Times, serif;

              font-style: italic;

            }

            .style11 {font-size: 14px}

            .style12 {

              font-size: 16px;

              font-family: "Courier New", Courier, monospace;

              font-style: italic;

            }

            .style13 {

              font-size: 16px;

              font-style: italic;

            }

            .style15 {font-size: 16px; font-family: "Courier New", Courier, monospace; font-style: italic; font-weight: bold; }

            -->

            </style>

            </head>

             

             

            <body>

            <table width="960" border="0" align="center">

              <tr>

                <td><script type="text/javascript">

            AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','wid th','960','height','300','src','Banner_Scene 1','quality','high','pluginspage','http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','movi e','Banner_Scene 1' ); //end AC code

            </script><noscript><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="960" height="300">

                  <param name="movie" value="Banner_Scene 1.swf" />

                  <param name="quality" value="high" />

                  <embed src="Banner_Scene 1.swf" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="960" height="300"></embed>

                </object></noscript></td>

              </tr>

            </table>

            <table width="960" border="1" align="center">

              <tr>

                <td bgcolor="#3333FF"><ul id="MenuBar1" class="MenuBarHorizontal">

                  <li>

                    <div align="center" class="style5"><a href="#">About US!</a></div>

                  </li>

                  <li>

                    <div align="center" class="style5"><a href="#">Contact US!</a></div>

                  </li>

                  <li>

                    <div align="center"><span class="style5"><a href="#" class="MenuBarItemSubmenu">Laptops</a></span>

                        <ul>

                          <li>

                            <div align="center"><a href="#">Dell</a></div>

                          </li>

                          <li>

                            <div align="center"><a href="#">HP</a></div>

                          </li>

                          <li>

                            <div align="center"><a href="#">Acer</a></div>

                          </li>

                        </ul>

                    </div>

                  </li>

                  <li>

                    <div align="center"><span class="style5"><a class="MenuBarItemSubmenu" href="#">Desktop PC</a></span>

                      <ul>

                        <li>

                          <div align="center"><a href="#">Dell</a> </div>

                        </li>

                        <li>

                          <div align="center"><a href="#">HP</a></div>

                        </li>

                        <li>

                          <div align="center"><a href="#">Acer</a></div>

                        </li>

                      </ul>

                    </div>

                  </li>

                  <li>

                    <div align="center" class="style5"><a href="#">Home</a></div>

                  </li>

                </ul></td>

              </tr>

            </table>

            <p> </p>

            <table width="192" border="0" cellspacing="0" cellpadding="0">

              <tr>

                <td width="188"><div id="CollapsiblePanel1" class="CollapsiblePanel">

                  <div class="CollapsiblePanelTab style6 style11" tabindex="0">

                    <div align="center">Home</div>

                  </div>

                  <div class="CollapsiblePanelContent"></div>

                </div></td>

              </tr>

              <tr>

                <td bgcolor="#FFFFD9"><div id="CollapsiblePanel2" class="CollapsiblePanel">

                  <div class="style11 CollapsiblePanelTab" tabindex="0">

                    <div align="center"><em>Desktop PC</em></div>

                  </div>

                  <div class="CollapsiblePanelContent">

                    <div align="center" class="style12"><strong class="style15">Dell<br />

                      Hp<br />

                      Acer

                      </strong>

                      </p>

                    </div>

                  </div>

                </div></td>

              </tr>

              <tr>

                <td bgcolor="#FFFFD9"><div id="CollapsiblePanel3" class="CollapsiblePanel">

                  <div class="CollapsiblePanelTab style11" tabindex="0">

                    <div align="center"><em>Laptops</em></div>

                  </div>

                  <div class="CollapsiblePanelContent">

                    <div align="center"><span class="style15">Dell<br />

                      Hp<br />

                      Acer</span><br />

                      </div>

                  </div>

                </div></td>

              </tr>

              <tr>

                <td><div id="CollapsiblePanel4" class="CollapsiblePanel">

                  <div class="CollapsiblePanelTab" tabindex="0">

                    <div align="center" class="style13">Contact Us!</div>

                  </div>

                  <div class="CollapsiblePanelContent"></div>

                </div></td>

              </tr>

              <tr>

                <td><div id="CollapsiblePanel5" class="CollapsiblePanel">

                  <div class="CollapsiblePanelTab" tabindex="0">

                    <div align="center" class="style13">About Us!</div>

                  </div>

                  <div class="CollapsiblePanelContent"></div>

                </div></td>

              </tr>

            </table>

            <script type="text/javascript">

            <!--

            var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});

            var CollapsiblePanel1 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel1");

            var CollapsiblePanel2 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel2", {contentIsOpen:false});

            var CollapsiblePanel3 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel3", {contentIsOpen:false});

            var CollapsiblePanel4 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel4");

            var CollapsiblePanel5 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel5");

            //-->

            </script>

            </body>

            </html>

            • 3. Re: Re: How i Insert a Table alongside another Table??
              osgood_ CommunityMVP
              osgood_ Nov 11, 2014 11:35 PM (in response to FurqanHanif)

              Insert the code in RED in your pages code directly before <script type="text/javascript"> (near the end of the code)  like:

               

              <div id="content">Content</div>

               

              <script type="text/javascript">

               

               

               

               

               

              Then insert the code in RED directly before --> </style> (near the top of the page code) like:

               

               

              #collapsiblePanelTable {

                  float: left;

              }

               

              #content {

                  float: left;

                  width: 720px;

                  margin-left: 50px;

              }

               

              -->

              </style>

              </head>

              <body>

               

              You then have to add the 'id' in RED to the  'collapsible panel table' opening <table> tag.

               

              <table id="collapsiblePanelTable" width="192" border="0" cellspacing="0" cellpadding="0">

              • 4. Re: How i Insert a Table alongside another Table??
                Ben Pleysier CommunityMVP
                Ben Pleysier Nov 12, 2014 12:01 AM (in response to osgood_)

                Hi osgood_

                 

                I think you may have forgotten to give #collapsiblePanelTable a width as in

                #collapsiblePanelTable {

                    float: left;

                    width: 190px;

                }

                • 5. Re: How i Insert a Table alongside another Table??
                  osgood_ CommunityMVP
                  osgood_ Nov 12, 2014 12:34 AM (in response to Ben Pleysier)

                  Hi Ben

                   

                  Width is already set on table tag.

                   

                  I know, code is past sell by date.

                  • 6. Re: How i Insert a Table alongside another Table??
                    Ben Pleysier CommunityMVP
                    Ben Pleysier Nov 12, 2014 2:24 AM (in response to osgood_)

                    Hi osgood_

                     

                    I stand corrected, the width of the table is recognised by the containing element, hence no need for the width.

                    • 7. Re: How i Insert a Table alongside another Table??
                      MurraySummers CommunityMVP
                      MurraySummers Nov 12, 2014 3:54 AM (in response to FurqanHanif)

                      If you are using tables for layout, you may find these previous responses beyond your ken. The table/layout approach is horribly 'retrograde' but here's the easy way to do it:

                       

                      1. Create a one row, two cell table.

                      2. Insert each of your desired tables into the appropriate cell of the outer table.

                       

                      I emphasize that this is the wrong way to build a page in 2014 (and it's one I stopped using at the turn of the century for good reasons), but it may get you going.