Results 1 to 2 of 2

Thread: formatting data table

  1. #1
    Join Date
    Nov 2008
    Posts
    42
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default formatting data table

    Hello:

    I am trying to create a result form from mysql and I am having problems formatting my html data tables. The result should be show a picture ( link in mysql ), then next to it a table that will probably contain 4 fields that I have as table0. I want this to be 100%, but when I make it 100%, it automatically drops below the picture. The same goes for the 2 tables, table1 and table2 ( all these names are temp only so that I can see the placement ). I can not get them to be 50% each. I want to add another row of tables that will be hidden in all views accept with a media query of 240. This would then show a little more information for mobile users. I am not worried just yet about the media query. Can anyone help me please. I have added the code here along with a link. I am not using external css until it works.

    http://www.pepelepew1962.x10.mx/help.html


    Code:
    <!DOCTYPE html>
    
    <head>
    
    
    <style type="text/css">
    
    
    #pager
    {
    width:75%;
    }
    
    
    #page01
    {
    	margin:  10px auto;
    	border: 2px solid #191919;
    	background-color:  #2C2C2C;
    	padding: 10px;
    border-radius: 4px;
    	/* [disabled]margin-bottom: 10px; */
    	/* [disabled]margin-top: 10px; */
    
    }
    
    #pk01 img
    {
    	width: 75px;
    	height:  100px;
    }
    
    
    .pix {
    	display:block;
    	max-width:100%;
    	height:auto;
    	margin:0.0em auto;
       float: left;
    }
    
    
    .table0 {
    	width:90%;
    	margin:auto;
    	font-size:12px;
    	border:1px solid #0000FF;
       float: left;
       margin-bottom: 5px;
    }
    
    .table0 th {
    	font-weight:bold;
    	color: yellow;
    	vertical-align:middle;
    	text-align:center;
    	border:1px solid #C1FFC1;
    }
    
    
    
    
    
    .table1 {
    	width:40%;
    	margin:auto;
    	font-size:12px;
    	border:1px solid #FF1493;
       float: left;
    }
    
    .table1 th {
    	font-weight:bold;
    	color:#00FFFF;
    	vertical-align:middle;
    	text-align:center;
    	border:1px solid #C1FFC1;
    }
    
    .table1 tr {
    	border:1px solid #C1FFC1;
    }
    
    .table1 td {
    	font-weight:bold;
    	color:#00FF00;
    	vertical-align:middle;
    	text-align:left;
       padding-left:  15px;
    	border:1px solid #C1FFC1;
    }
    
    
    .table2 {
    	width:40%;
    	margin:auto;
    	font-size:12px;
    	border:1px solid #FF1493;
       float: left;
    }
    
    .table2 th {
    	font-weight:bold;
    	color:#00FFFF;
    	vertical-align:middle;
    	text-align:center;
    	border:1px solid #C1FFC1;
    }
    
    .table2 tr {
    	border:1px solid #C1FFC1;
    }
    
    .table2 td {
    	font-weight:bold;
    	color:#FF0000;
    	vertical-align:middle;
    	text-align:left;
       padding-left:  15px;
    	border:1px solid #C1FFC1;
    }
    
    
    
    </style>
    
    <title>
    	Test Page
    </title>
    
    
    
    </head>
    <body bgcolor="#000000">
    
    <div id="pager">
    
       <div id="page01">
    
          <div id="pk01">
             <img src="300x250_uap.gif" class="pix" />
          </div>
    
          <div id="exampleB">
             <table class="table0">
                <tr>
                   <th> SOMETHING</th>
                   <th> SOMETHING</th>
                   <th> SOMETHING</th>
                   <th> SOMETHING</th>
                </tr>
             </table>
          </div>
    
          <div id="exampleB">
             <table class="table2">
                <tr>
                   <td>Book</td>
                   <td>$5.00</td>
                </tr>
                <tr>
                   <td>Shoe</td>
                   <td>$10.00</td>
                </tr>
                <tr>
                   <td>Flower</td>
                   <td>$3.00</td>
                </tr>
             </table>
    
             <table class="table1">
                <tr>
                   <td>Books</td>
                   <td>$5.00</td>
                </tr>
                <tr>
                   <td>Shoes</td>
                   <td>$10.00</td>
                </tr>
                <tr>
                   <td>Flowers</td>
                   <td>$3.00</td>
                </tr>
             </table>
    
          </div>
    
          <div style="clear: left;"></div>
       </div>
    
       <div id="page01">
    
          <div id="pk01">
             <img src="300x250_uap.gif" class="pix" />
          </div>
    
          <div id="exampleB">
             <table class="table0">
                <tr>
                   <th> SOMETHING</th>
                   <th> SOMETHING</th>
                   <th> SOMETHING</th>
                   <th> SOMETHING</th>
                </tr>
             </table>
          </div>
    
          <div id="exampleB">
             <table class="table2">
                <tr>
                   <td>Book</td>
                   <td>$5.00</td>
                </tr>
                <tr>
                   <td>Shoe</td>
                   <td>$10.00</td>
                </tr>
                <tr>
                   <td>Flower</td>
                   <td>$3.00</td>
                </tr>
             </table>
    
             <table class="table1">
                <tr>
                   <td>Books</td>
                   <td>$5.00</td>
                </tr>
                <tr>
                   <td>Shoes</td>
                   <td>$10.00</td>
                </tr>
                <tr>
                   <td>Flowers</td>
                   <td>$3.00</td>
                </tr>
             </table>
    
          </div>
    
          <div style="clear: left;"></div>
       </div>
    
    </div>
    
    </body></html>

  2. #2
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    2,000
    Thanks
    16
    Thanked 315 Times in 313 Posts
    Blog Entries
    12

    Default

    You wouldn't be able to make the table 100% width and keep it on the same line as the image if you want them both to occupy the same line - that's just maths. You could do it if your image was inside of the table in its own cell though.
    Focus on Function Web Design | Latest News RSS | Facebook | Twitter |
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps |
    The only limit to creativity is imagination: JemCon.org

Similar Threads

  1. PHP Retrieve data from DB Table
    By igotregistered in forum PHP
    Replies: 29
    Last Post: 12-04-2012, 12:53 AM
  2. print table data
    By udaybabu in forum CSS
    Replies: 3
    Last Post: 10-04-2012, 07:57 AM
  3. How to import data from one table to other
    By gurmeet in forum MySQL and other databases
    Replies: 4
    Last Post: 04-21-2011, 02:51 AM
  4. Move Data from 1 Table to Another
    By smithster in forum MySQL and other databases
    Replies: 6
    Last Post: 06-03-2007, 11:24 AM
  5. Replies: 9
    Last Post: 05-18-2007, 04:13 PM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •