Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Aug 2013
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    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
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,297
    Thanks
    23
    Thanked 612 Times in 611 Posts
    First => You can only have ONE ID in a script. The point in case:
    Code:
    <div id="page01">
    is on the page twice.
    I think this is because you repeat the table. I don't think that's what you want to do. So I got rid of second table.

    The code that I give you is responsive down to 640px width. At this time you need to make the image shrink and you will have to figure out when to split the table into three sections.

    Here is everything in one table. FYI: the <col> tag does not take the color attribute.
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title>Test Page</title>
    <style type="text/css">
    table{width: 100%;height: 250px;}
    th{color: yellow;}
    tr .green{color: green;}
    tr .red{color: red;}
    </style>
    </head>
    
    <body bgcolor="#2C2C2C"> <!--   bgcolor="#2C2C2C"-->
    <div id="pager">
    <table border="1">
    <col style="background-color: #6374AB;width:300px;" />
    <col span="2" style="background-color: #2C2C2C;width:calc(25%-300px);" />
    <col span="2" style="background-color: #2C2C2C;width:calc(25%-300px);" />
    	<tr>
    	<th id="diff" rowspan="4"><img src="300x250_uap.gif" width="300px" height="250px" alt="MY 300x250 picture" class="pix" /></th>
    	<th> SOMETHING</th>
    	<th> SOMETHING</th>
    	<th> SOMETHING</th>
    	<th> SOMETHING</th>
    	</tr>
    
    	<tr>
    	<td class="red">Book</td>
    	<td class="red">$5.00</td>
    	<td class="green">Books</td>
    	<td class="green">$5.00</td>
    	</tr>
    	<tr>
    	<td class="red">Shoe</td>
    	<td class="red">$10.00</td>
    	<td class="green">Shoes</td>
    	<td class="green">$10.00</td>
    	</tr>
    	<tr>
    	<td class="red">Flower</td>
    	<td class="red">$3.00</td>
    	<td class="green">Flowers</td>
    	<td class="green">$3.00</td>
    	</tr>
    </table>
    </div>
    </body>
    </html>
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."


  •  

    Posting Permissions

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