Board index   FAQ   Search  
Register  Login
Board index php forum :: HTML CSS

formatting data table

Questions and tutorials related to Cascading Style Sheets *all versions*

Moderators: macek, egami, gesf

formatting data table

Postby pepelepew1962 » Sun Aug 18, 2013 2:34 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.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>
pepelepew1962
New php-forum User
New php-forum User
 
Posts: 14
Joined: Sat May 28, 2011 5:12 pm

Return to CSS

Who is online

Users browsing this forum: No registered users and 1 guest

Sponsored by Sitebuilder Web hosting and Traduzioni Italiano Rumeno and antispam for cPanel.