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


<!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 there a reason that you did not put a table container with two cells around the image and its associate tables… one cell around the image and one cell around the associated tables?

Sorry if I sounded rude. I’m trying to understand the picture.

The 4 <th> items, “SOMETHING”, are in a single container. They limit the narrowness of the page long before it narrows to 240px. How do you expect them to behave as the page width narrows? Would you want them to drop beneath one another?

It looks like I can assume that table1 and table2 are fine as they are as they will narrow to the desired 240px if they are on separate lines.

How am I doing?

This is where I was going with the added table container. Not a finished picture, but it shows that CSS display:table behaviors can be changed with a media query to alter the layout.


<!DOCTYPE html>
<html>
<head>
    <style type="text/css">
#pager {
    width:75%;
}

#page01 {
    display:table;
    width:100%;
    outline:1px solid magenta;
	margin:10px auto;
	border:2px solid #191919;
	background-color:  #2C2C2C;
	padding: 10px;
    border-radius: 4px;
	/* [disabled]margin-bottom: 10px; */
	/* [disabled]margin-top: 10px; */

}
.tcell {
    outline:1px solid cyan;
    display:table-cell;
}
.tcell:first-child {
    width:75px;
}

#pk01 img {
	width:75px;
	height:100px;
}

.pix {
	display:block;
	max-width:100%;
	height:auto;
	margin:0.0em auto;
/*    float:left;  /* */
}

.table0 {
	width:100%;
	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:50%;
	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:50%;
	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;
}
@media screen and (max-width:700px) {
    .tcell {
        display:inline-block;
        width:100%;
    }
}

    </style>
    <title>Test Page</title>
</head>
<body bgcolor="#000000">
<div id="pager">
    <div id="page01">
        <div class="tcell">
            <div id="pk01">
                <img class="pix" src="300x250_uap.gif" width="300" height="250">
            </div>
        </div>
        <div class="tcell">
            <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>
    <div id="page01">
        <div class="tcell">
            <div id="pk01">
                <img class="pix" src="300x250_uap.gif" width="300" height="250">
            </div>
        </div>
        <div class="tcell">
            <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>
</div>
</body>
</html>

Please consider a reminder that an ID cannot be repeated on a page. For example, id=“exampleB”, should be changed to class=“exampleB” in the HTML and CSS. There are others…

That about does it, Ron. Thank you so much. No, you did not sound rude !!! My goal is to have a results page like many many sites, ebay, classifieds, dating, real estate, where there is a picture with tabled data from say MySQL. The second row, which has 2 tables should wrap into 2 rows of 1 each, when the screen size reaches whatever media query I decide. Right now everything drops below the picture. I will try breaking the 2 tables on my own and will get back if I can’t get it, but again, thanks!!!