2 Replies - 614 Views - Last Post: 18 August 2013 - 05:41 PM

#1 pepelepew1962  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 8
  • Joined: 03-August 13

formatting data table

Posted 18 August 2013 - 03:38 PM

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.pepelepew...10.mx/help.html

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



Is This A Good Question/Topic? 0
  • +

Replies To: formatting data table

#2 andrewsw  Icon User is online

  • Fire giant boob nipple gun!
  • member icon

Reputation: 3359
  • View blog
  • Posts: 11,374
  • Joined: 12-December 12

Re: formatting data table

Posted 18 August 2013 - 04:34 PM

I have to first ask why you are using three separate tables? Your first table (table0) only contains headers (th), surely these are the headers for the rows of data that follow?

Even with three tables I don't see the need to wrap some in an additional div.

Also, ids must be unique on the page, and width: 100% doesn't take into account padding, borders or margins.

This post has been edited by andrewsw: 18 August 2013 - 04:41 PM

Was This Post Helpful? 0
  • +
  • -

#3 pepelepew1962  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 8
  • Joined: 03-August 13

Re: formatting data table

Posted 18 August 2013 - 05:41 PM

I have table0 setup like that because it is the main piece of information and should not wrap like the tables should. Dunno, maybe just my poor writing I guess. I have separate divs because they need to drop under each other when the window size shrinks, but all flush with the picture, until the media query 240 kicks in, then they will all be under the picture.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1