Results 1 to 2 of 2

Thread: formatting data table

  1. #1
    Join Date
    Nov 2008
    Posts
    52
    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,418
    Thanks
    16
    Thanked 414 Times in 412 Posts
    Blog Entries
    19

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

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
  •