Member Avatar for phphp

Sir I have these codes

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
<META HTTP-EQUIV="Expires" CONTENT="-1">

<title>Stock</title>

<style type="text/css">
html {
overflow: auto;
}
body {
font-family: Georgia, "Times New Roman", Times, serif;
}
#container
{
position: absolute;
margin:  auto;
top: 0;
left: 1px;
right: 0;
bottom: 0;
background-color: #FFF;
padding: 20px;
overflow: hidden;
border: 1px solid #06F;
box-shadow: 0px 0px 30px rgba(135, 206, 235, 0.78);
width:50%;
height:200px;
}

#box1
{
float:left;
width:45%;
height:70%;
border:1px solid #ccc;
border-radius:0px;  
padding:30px 0px 0px 0px;
margin:10px 10px 10px 0px;
color:#39F;
font-weight:bold;
text-align:center;
overflow:hidden;
}

#box1 th
{
color:#F30;
background-color:#CFC;
}

#box1 table {
    border-collapse: collapse;
    border-color:#C0C0C0;
    background-color:#CFF;
}

#box1 table, th, td {
    border: 0px solid #C0C0C0;
}


#box2
{
float:left;
width:45.8%;
height:70%;
border:1px solid #ccc;
border-radius:0px;  
padding:30px 0px 0px 0px;
margin:10px 10px 10px 0px;
color:#39F;
font-weight:bold;
text-align:center;
overflow:hidden;
}

#box2 th
{
color:#66C;
background-color:#FF6;
}

#box2 table {
    border-collapse: collapse;
    border-color:#C0C0C0;
    background-color:#FFC;
}

#box2 table, th, td {
    border: 1px solid #C0C0C0;
}


</style>

</head>

<body>

<div id='container'>

    <div id="box1">
        <div style="margin:0 auto;width:80%;">
        <table width="100%" style="text-align:center;">
        <th width="70%">Particulrs</th>
        <th width="30%">Bags</th>
        <tr><td>Opening</td><td><input type="text"  value="650" size="6" maxlength="6" /></td></tr>
        <tr><td>Purchase</td><td><input type="text"  value="100" size="6" maxlength="6" /></td></tr>
        <tr><td>
        <span style="color:#804000">Total</span></td><td><input type="text"  value="750" size="6" maxlength="6" readonly tabindex="-1" />
        </td></tr>
        </table>
        </div>
    </div>


    <div id="box2">
        <div style="margin:0 auto;width:80%;">
        <table width="100%" style="text-align:center;">
        <th width="70%">Particulrs</th>
        <th width="30%">Bags</th>
        <tr><td>Opening</td><td><input type="text"  value="1050" size="6" maxlength="6" /></td></tr>
        <tr><td>Purchase</td><td><input type="text"  value="250" size="6" maxlength="6" /></td></tr>
        <tr><td>
        <span style="color:#804000">Total</span></td><td><input type="text" value="1300" size="6" maxlength="6" readonly tabindex="-1" />
        </td></tr>
        </table>
        </div>
    </div>


</div>

</body>
</html>

The above codes generates following tables

[IMG]http://i63.tinypic.com/334kl5l.png[/IMG]

I want to ask is this correct method to create tables with different formats.
I used separate dives (#box1 and #box2) and tables for separate formats.

Or is there any other sort method to apply different formats to many tables.
Actually my page has 10 tables and I want to apply unique format like different th td format to evey table?

Please help

  • 2 Contributors
  • 1 Reply
  • 97 Views
  • 3 Days Discussion Span
  • Latest Post Latest Post by diafol
Member Avatar for diafol

You can do it like that, however, you may be better off making the styling more specific to the table tag, e.g.

<table class="resulttable resulttable-yellow">

Place common table properties within .resulttable{} and specific yellow background stuff within .resulttable-yellow{}

.tablebox{
    float:left;
    width:45%;
    height:70%;
    border:1px solid #ccc;
    border-radius:0px;  
    padding:30px 0px 0px 0px;
    margin:10px 10px 10px 0px;
    color:#39F;
    font-weight:bold;
    text-align:center;
    overflow:hidden;
}

.tablebox div{
    margin:0 auto;
    width:80%;
}

.resulttable{
    width: 100%;
    text-align: center;
    border-collapse: collapse;
    border-color:#C0C0C0;
}
.resulttable th, .resulttable td{
    border: 1px solid #C0C0C0;   
}
.resulttable th:first-child{
    width: 70%;
}
.resulttable th:nth-child(2){
    width: 30%;
}
.resulttable td span{
    color: #804000;
}

/* OK now go to it to style individual types of resulttable... */

.resulttable-yellow{
    background-color:#FFC;
}

.resulttable-yellow th{
    color:#66C;
    background-color:#FF6;
}

.resulttable-red{
    background-color:#CFF;
}

.resulttable-red th{
    color:#F30;
    background-color:#CFC;
}

I have no idea which colours you have, but the above is just an example. It's generally a bad idea to name classes with colours.

Anyhow, this allows you to anter a cleaner markup:

<div class="tablebox">
        <div>
            <table class="resulttable resulttable-yellow">
                <tr>
                    <th>Particulrs</th>
                    <th>Bags</th>
                </tr>
                <tr>
                    <td>Opening</td>
                    <td><input type="text"  value="650" size="6" maxlength="6" /></td>
                </tr>
                <tr>
                    <td>Purchase</td>
                    <td><input type="text"  value="100" size="6" maxlength="6" /></td>
                </tr>
                <tr>
                    <td><span>Total</span></td>
                    <td><input type="text"  value="750" size="6" maxlength="6" readonly tabindex="-1" /></td>
                </tr>
        </table>
    </div>
</div>

I haven't checked the CSS usage, but it looks a little verbose. There are many ways to skin a cat and I'm sure that you could find a more succinct way again. Just remember if you're reusing a lot of properties over and over - make a class not an id. An id is a bit of a pain as you need to specify each descendent if you want to give them the same styling, e.g.

<div id="box1">
    <div>
    </div>
</div>
<div id="box2">
    <div>
    </div>
</div>

Versus:

<div class="box">
    <div>
    </div>
</div>
<div class="box">
    <div>
    </div>
</div>

The first you'd need to do this (name each id):

#box1 div, #box2 div{
    ...blah blah
}

Whereas the second:

.box div{
    ...blah blah
}

The latter is scalable, the first isn't.

Edited by diafol
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.