www.webdeveloper.com
Results 1 to 3 of 3

Thread: formatting data table

  1. #1
    Join Date
    Aug 2013
    Posts
    4

    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
    Dec 2012
    Posts
    46
    Your description is somewhat hard to follow, but I will make an attempt: Your first problem saying 100% puts the table below the image makes complete sense. If something is width 100% that means it will take up 100% of the width of its parent which in this case will be "example B" div. You haven't even styled that to have a width so it will inherit from its parent which in turn is page01 (none specified) then finally #pager has a width of 75%.

    So the problem is you want the table to take up 100% of that 75% but still be next to the image? This isn't possible you will need the width to equal 100% minus image width. You could change how that is handled by having the image in one div that floats left and the table in another that floats right. The issue you would have to dynamicly figure out what % the image width is based off the screen width. (or you could go with a preset width that makes sense say around 960px and then you can manually calculate everything else based off that size)

    It seems your second problem is the same as the first as 50%+50% = 100% and fills the whole screen again.

    I know you mentioned that the names would change because you knew someone would complain about how broad they are, but honestly naming things appropriately even in the beginning stages are going to help to you visualize what purpose each div serves and it will help us who attempt to assist you in these troubles visualize what is needed.

    Last tip i would leave you with is installing firebug it will allow you to click on each element you are trying to style and style it in the browser image until you get your desired result then you can go back to the code and change your stylesheet. This helps in situations where you are having a hard time visualizing the end result of your code.

    Good luck!

  3. #3
    Join Date
    Aug 2013
    Posts
    4
    You did not provide 1 line of code, but the lesson learned was worth more than the actual solution. Thank you so much. You explained it to the point of understanding and something to carry with me. Understanding is always worth more than the solution because the problems are minimal when you have the foundation.

    Changing the names is something I will work on. Never heard of firebug, but I will definitely look into it.

    Again, thanks !!!

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles