SitePoint Sponsor

User Tag List

Results 1 to 7 of 7

Hybrid View

  1. #1
    SitePoint Enthusiast
    Join Date
    Nov 2008
    Posts
    42
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,507
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    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?

  3. #3
    SitePoint Enthusiast
    Join Date
    Nov 2008
    Posts
    42
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ronpat View Post
    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?

  4. #4
    SitePoint Enthusiast
    Join Date
    Nov 2008
    Posts
    42
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by pepe_lepew1962 View Post
    Inexperience??? This is all new to me, so are you sating, create a table with 2 columns, 1 for the pic and the other for the data? If that is the case, how will the tables fall below the picture when I make a media query for 240px

  5. #5
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,507
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    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?

  6. #6
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,507
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    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.
    Code:
    <!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...

  7. #7
    SitePoint Enthusiast
    Join Date
    Nov 2008
    Posts
    42
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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!!!


Bookmarks

Posting Permissions

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