Tables with different formats

Question

phphp 14 Junior Poster in Training

7 Years Ago

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
96 Views
3 Days Discussion Span
Latest Post 7 Years Ago Latest Post by diafol

Reply to this topic

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.

diafol · Answer 1 · 2016-05-31T14:58:56+00:00

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.