formatting data table

pepelepew1962 · August 18, 2013

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

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

Sign In

formatting data table

Recommended Posts

pepelepew1962

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information