1 reply [Last post]
pepelepe
pepelepe's picture
Offline
newbie
Vancouver, BC
Last seen: 4 years 4 weeks ago
Vancouver, BC
Timezone: GMT-7
Joined: 2013-08-03
Posts: 6
Points: 11

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>

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 3 days 5 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5342
Points: 2963

I think your structure should

I think your structure should be something like:

<table class="table0">
            <tr>
               <th> SOMETHING</th>
               <th> SOMETHING</th>
               <th> SOMETHING</th>
               <th> SOMETHING</th>
            </tr>
<tr>
  <td> 
      <table class="table2">
            <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>
     </td>
  <td>
<table class="table1">
            <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>
    </td>
</tr>
         </table>