WebArtz - The Web Design Forum
Welcome to WebArtz, Guest!

WebArtz is a nice place for discussions related to web designing and coding. We help our members to code their own website templates with HTML and CSS. We give them advice on various issues.

To know more about WebArtz Forum, visit the About Us page.

At the moment, you are viewing the forum as a guest. As a guest you can't make post and participate in discussions. You need to register and become a member of the forum. Click the register link below and become a part of this forum.

Thank You

WebArtz - The Web Design Forum
Welcome to WebArtz, Guest!

WebArtz is a nice place for discussions related to web designing and coding. We help our members to code their own website templates with HTML and CSS. We give them advice on various issues.

To know more about WebArtz Forum, visit the About Us page.

At the moment, you are viewing the forum as a guest. As a guest you can't make post and participate in discussions. You need to register and become a member of the forum. Click the register link below and become a part of this forum.

Thank You


You are not connected. Please login or register

WebArtz - The Web Design Forum » Web Designing & Coding » HTML (Hyper Text Markup Language) » Decorate Tables

View previous topic View next topic Go down  Message [Page 1 of 1]

1Decorate Tables Empty Decorate Tables Wed Feb 17, 2010 12:18 am

MrMega

MrMega
Registered Member
Registered Member
http://www.fujiplanet.net/Achievement-Table-h7.htm

I have that so far.
Any chance of beautifying it? xD
I want to make it look nicer? More colors? Straighten it out?

Code:
<div style="text-align:center;font-weight:bold;font-size: 12px;padding: 4px 0px 4px 0px;">
<table cellpadding="30" border="0" align="left">
            <tr>
        <th colspan="6" class="title">Fuji Planet Achievements</th>
    </tr>
   
    <tr>
        <th class="dark" colspan="2">Achievement Name</th>
        <th class="dark">Achievement Description</th>
    </tr>
   
        <tr>
        <td class="normal" style="text-align: left;">
        <img src="http://gpxplus.net/files/images/achievements/locked.gif" alt="" />        </td>
        <td class="normal" nowrap="nowrap">Newbie Addict</td>
        <td class="light">Get 100 posts</td>

        <td class="light" nowrap="nowrap">
        </td>
    </tr>
            <tr>
        <td class="normal" style="text-align: left;">
        <img src="http://gpxplus.net/files/images/achievements/locked.gif" alt="" />        </td>

        <td class="normal" nowrap="nowrap">Noviciate Addict</td>
        <td class="light">Get 500 posts</td>
    </tr>
            <tr>

        <td class="normal" style="text-align: left;">
        <img src="http://gpxplus.net/files/images/achievements/locked.gif" alt="" />        </td>
        <td class="normal" nowrap="nowrap">Dexterous Addict</td>
        <td class="light">Get 1,000 posts</td>

    </tr>
            <tr>
        <td class="normal" style="text-align: left;">
        <img src="http://gpxplus.net/files/images/achievements/locked.gif" alt="" />        </td>
        <td class="normal" nowrap="nowrap">Master Addict</td>
        <td class="light">Get 5,000 posts</td>
    </tr>
            <tr>
        <td class="normal" style="text-align: left;">
        <img src="http://gpxplus.net/files/images/achievements/locked.gif" alt="" />        </td>
        <td class="normal" nowrap="nowrap">Lucky Lotto</td>

        <td class="light">Win at least 5 lotteries</td>
        <td class="light" nowrap="nowrap">
        </td>
    </tr>
            <tr>
        <td class="normal" style="text-align: left;">

        <img src="http://gpxplus.net/files/images/achievements/locked.gif" alt="" />        </td>
        <td class="normal" nowrap="nowrap">Planet Tourist</td>
        <td class="light">Be on on the forum for at least 3 months</td>
        <td class="light" nowrap="nowrap">        </td>

    </tr>
            <tr>
        <td class="normal" style="text-align: left;">
        <img src="http://gpxplus.net/files/images/achievements/locked.gif" alt="" />        </td>
        <td class="normal" nowrap="nowrap">Planet Citizen</td>
        <td class="light">Be on the forum for at least 7 months</td>
    </tr>   
            <tr>
        <td class="normal" style="text-align: left;">
        <img src="http://gpxplus.net/files/images/achievements/locked.gif" alt="" />        </td>
        <td class="normal" nowrap="nowrap">Planet Senior</td>
        <td class="light">Be on the forum for at least 1 year</td>
    </tr>   
            <tr>
        <td class="normal" style="text-align: left;">
        <img src="http://gpxplus.net/files/images/achievements/locked.gif" alt="" />        </td>
        <td class="normal" nowrap="nowrap">Smart Shopper</td>
        <td class="light">Buy 10 items from the FujiShop in 1 day</td>
    </tr>   
            <tr>
        <td class="normal" style="text-align: left;">
        <img src="http://gpxplus.net/files/images/achievements/locked.gif" alt="" />        </td>
        <td class="normal" nowrap="nowrap">Life Savings</td>
        <td class="light">Have at least 100,000 Fuji Bucks at hand at one time</td>
    </tr>   
            <tr>
        <td class="normal" style="text-align: left;">
        <img src="http://gpxplus.net/files/images/achievements/locked.gif" alt="" />        </td>
        <td class="normal" nowrap="nowrap">Loss for Words</td>
        <td class="light">Post a topic or post with exactly (no more or less) 1,500 words that follows the rules</td>
    </tr>           
</table>
</div>



Last edited by MrMega on Wed Feb 17, 2010 12:23 am; edited 1 time in total

2Decorate Tables Empty Re: Decorate Tables Wed Feb 17, 2010 12:22 am

Sanket

Sanket
Administrator
Administrator
Maybe you should provide the code here for someone to modify it to make it better Wink

http://www.webartzforum.com

3Decorate Tables Empty Re: Decorate Tables Wed Feb 17, 2010 12:24 am

MrMega

MrMega
Registered Member
Registered Member
Haha, edited Smile
Btw I want to make the space in-between columns smaller, and show an actual table with lines and everything...

4Decorate Tables Empty Re: Decorate Tables Wed Feb 17, 2010 1:45 am

Sanket

Sanket
Administrator
Administrator
Code:
<!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" xml:lang="en" lang="en">
<head>
  <title></title>
  <meta http-equiv="generator" content="CoffeeCup HTML Editor (www.coffeecup.com)" />
  <meta name="created" content="Tue, 16 Feb 2010 18:04:39 GMT" />
  <meta http-equiv="content-type" content="text/html;charset=utf-8" />
  <meta name="description" content="" />
  <meta name="keywords" content="" />
  <style type="text/css">
#maintable{
   border-width: 4px 4px 4px 4px;
   border-style: outset outset outset outset;
   border-color: black black black black;
   border-collapse: separate;
}

.dark{
   border-width: 1px 1px 1px 1px;
   padding: 5px 5px 5px 5px;
   border-style: solid solid solid solid;
   border-color: black black black black;
   background-color: rgb(195, 86, 23);
    }

.normal {
   border-width: 1px 1px 1px 1px;
   padding: 5px 5px 5px 5px;
   border-style: solid solid solid solid;
   border-color: black black black black;
   background-color: rgb(229, 103, 23);
}

.light {
   border-width: 1px 1px 1px 1px;
   padding: 5px 5px 5px 5px;
   border-style: solid solid solid solid;
   border-color: black black black black;
   background-color: rgb(251, 177, 23);
   
}
</style>

</style>
</head>
<body>
<div style="text-align:center;font-weight:bold;font-size: 12px;padding: 4px 0px 4px 0px;">
<table  id="maintable" cellpadding="30" border="1" align="left" width = "850px" border-color="#FF0000">
            <tr>
        <th class ="dark" colspan="6" class="title">Fuji Planet Achievements</th>
    </tr>
 
    <tr>
        <th class="dark" colspan="2">Achievement Name</th>
        <th class="dark" colspan="4">Achievement Description</th>
    </tr>
 
        <tr>
        <td class="normal" background-color: rgb(229, 103, 23) style="text-align: left;">
        <img src="http://gpxplus.net/files/images/achievements/locked.gif" alt="" /></td>
        <td class="normal" nowrap="nowrap">Newbie Addict</td>
        <td class="light">Get 100 posts</td>
        </td>
    </tr>
            <tr>
        <td class="normal" style="text-align: left;">
        <img src="http://gpxplus.net/files/images/achievements/locked.gif" alt="" /></td>
        <td class="light" nowrap="nowrap">Noviciate Addict</td>
        <td class="normal">Get 500 posts</td>
    </tr>
            <tr>

        <td class="normal" style="text-align: left;">
        <img src="http://gpxplus.net/files/images/achievements/locked.gif" alt="" /></td>
        <td class="normal" nowrap="nowrap">Dexterous Addict</td>
        <td class="light">Get 1,000 posts</td>

    </tr>
            <tr>
        <td class="normal" style="text-align: left;">
        <img src="http://gpxplus.net/files/images/achievements/locked.gif" alt="" /></td>
        <td class="light" nowrap="nowrap">Master Addict</td>
        <td class="normal">Get 5,000 posts</td>
    </tr>
            <tr>
        <td class="normal" style="text-align: left;">
        <img src="http://gpxplus.net/files/images/achievements/locked.gif" alt="" /></td>
        <td class="normal" nowrap="nowrap">Lucky Lotto</td>
        <td class="light">Win at least 5 lotteries</td>       
        </td>
    </tr>
   
   
   
            <tr>
        <td class="normal" style="text-align: left;">
        <img src="http://gpxplus.net/files/images/achievements/locked.gif" alt="" /></td>
        <td class="light" nowrap="nowrap">Planet Tourist</td>
        <td class="normal">Be on on the forum for at least 3 months</td>
    </td>

    </tr>
            <tr>
        <td class="normal" style="text-align: left;">
        <img src="http://gpxplus.net/files/images/achievements/locked.gif" alt="" /></td>
        <td class="normal" nowrap="nowrap">Planet Citizen</td>
        <td class="light">Be on the forum for at least 7 months</td></td>
    </tr> 
            <tr>
        <td class="normal" style="text-align: left;">
        <img src="http://gpxplus.net/files/images/achievements/locked.gif" alt="" /></td>
        <td class="light" nowrap="nowrap">Planet Senior</td>
        <td class="normal">Be on the forum for at least 1 year</td>
    </tr> 
            <tr>
        <td class="normal" style="text-align: left;">
        <img src="http://gpxplus.net/files/images/achievements/locked.gif" alt="" /></td>
        <td class="normal" nowrap="nowrap">Smart Shopper</td>
        <td class="light">Buy 10 items from the FujiShop in 1 day</td>
    </tr> 
            <tr>
        <td class="normal" style="text-align: left;">
        <img src="http://gpxplus.net/files/images/achievements/locked.gif" alt="" /></td>
        <td class="light" nowrap="nowrap">Life Savings</td>
        <td class="normal">Have at least 100,000 Fuji Bucks at hand at one time</td>
    </tr> 
            <tr>
        <td class="normal" style="text-align: left;">
        <img src="http://gpxplus.net/files/images/achievements/locked.gif" alt="" /></td>
        <td class="normal" nowrap="nowrap">Loss for Words</td>
        <td class="light">Post a topic or post with exactly (no more or less) 1,500 words that follows the rules</td>
    </tr>         
</table>
</div>
</body>
</html>
See if this suits your requirement, i have defined a width of 850 for the table.

http://www.webartzforum.com

5Decorate Tables Empty Re: Decorate Tables Wed Feb 17, 2010 2:36 am

MrMega

MrMega
Registered Member
Registered Member
I LOVE YOU! YEAH YEAH YESSS AWESOMENESS!!!!

THANK YOU!
But is there any way to change the colors (in the light and dark pattern, I mean)? That is all else I need. THANK YOU Very Happy

6Decorate Tables Empty Re: Decorate Tables Wed Feb 17, 2010 2:37 am

Sanket

Sanket
Administrator
Administrator
Can you provide me the html color codes? I will do the rest.
http://www.computerhope.com/htmcolor.htm

http://www.webartzforum.com

7Decorate Tables Empty Re: Decorate Tables Wed Feb 17, 2010 2:43 am

MrMega

MrMega
Registered Member
Registered Member
#e56717 and #fbb117
are the default ones (right now)

I would like #F87217 and #F88017

8Decorate Tables Empty Re: Decorate Tables Wed Feb 17, 2010 2:52 am

Sanket

Sanket
Administrator
Administrator
Code:
<!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" xml:lang="en" lang="en">
<head>
  <title></title>
  <meta http-equiv="generator" content="CoffeeCup HTML Editor (www.coffeecup.com)" />
  <meta name="created" content="Tue, 16 Feb 2010 18:04:39 GMT" />
  <meta http-equiv="content-type" content="text/html;charset=utf-8" />
  <meta name="description" content="" />
  <meta name="keywords" content="" />
  <style type="text/css">
#maintable{
  border-width: 4px 4px 4px 4px;
  border-style: outset outset outset outset;
  border-color: black black black black;
  border-collapse: separate;
}

.dark{
  border-width: 1px 1px 1px 1px;
  padding: 5px 5px 5px 5px;
  border-style: solid solid solid solid;
  border-color: black black black black;
  background-color: rgb(195, 86, 23);
    }

.normal {
  border-width: 1px 1px 1px 1px;
  padding: 5px 5px 5px 5px;
  border-style: solid solid solid solid;
  border-color: black black black black;
  background-color: rgb(248, 114, 23);
}

.light {
  border-width: 1px 1px 1px 1px;
  padding: 5px 5px 5px 5px;
  border-style: solid solid solid solid;
  border-color: black black black black;
  background-color: rgb(248, 128, 23);
 
}
</style>

</style>
</head>
<body>
<div style="text-align:center;font-weight:bold;font-size: 12px;padding: 4px 0px 4px 0px;">
<table  id="maintable" cellpadding="30" border="1" align="left" width = "850px" >
            <tr>
        <th class ="dark" colspan="6" class="title">Fuji Planet Achievements</th>
    </tr>
 
    <tr>
        <th class="dark" colspan="2">Achievement Name</th>
        <th class="dark" colspan="4">Achievement Description</th>
    </tr>
 
        <tr>
        <td class="normal" style="text-align: left;">
        <img src="http://gpxplus.net/files/images/achievements/locked.gif" alt="" /></td>
        <td class="normal" nowrap="nowrap">Newbie Addict</td>
        <td class="light">Get 100 posts</td>
        </td>
    </tr>
            <tr>
        <td class="normal" style="text-align: left;">
        <img src="http://gpxplus.net/files/images/achievements/locked.gif" alt="" /></td>
        <td class="light" nowrap="nowrap">Noviciate Addict</td>
        <td class="normal">Get 500 posts</td>
    </tr>
            <tr>

        <td class="normal" style="text-align: left;">
        <img src="http://gpxplus.net/files/images/achievements/locked.gif" alt="" /></td>
        <td class="normal" nowrap="nowrap">Dexterous Addict</td>
        <td class="light">Get 1,000 posts</td>

    </tr>
            <tr>
        <td class="normal" style="text-align: left;">
        <img src="http://gpxplus.net/files/images/achievements/locked.gif" alt="" /></td>
        <td class="light" nowrap="nowrap">Master Addict</td>
        <td class="normal">Get 5,000 posts</td>
    </tr>
            <tr>
        <td class="normal" style="text-align: left;">
        <img src="http://gpxplus.net/files/images/achievements/locked.gif" alt="" /></td>
        <td class="normal" nowrap="nowrap">Lucky Lotto</td>
        <td class="light">Win at least 5 lotteries</td>     
        </td>
    </tr>
 
 
 
            <tr>
        <td class="normal" style="text-align: left;">
        <img src="http://gpxplus.net/files/images/achievements/locked.gif" alt="" /></td>
        <td class="light" nowrap="nowrap">Planet Tourist</td>
        <td class="normal">Be on on the forum for at least 3 months</td>
    </td>

    </tr>
            <tr>
        <td class="normal" style="text-align: left;">
        <img src="http://gpxplus.net/files/images/achievements/locked.gif" alt="" /></td>
        <td class="normal" nowrap="nowrap">Planet Citizen</td>
        <td class="light">Be on the forum for at least 7 months</td></td>
    </tr>
            <tr>
        <td class="normal" style="text-align: left;">
        <img src="http://gpxplus.net/files/images/achievements/locked.gif" alt="" /></td>
        <td class="light" nowrap="nowrap">Planet Senior</td>
        <td class="normal">Be on the forum for at least 1 year</td>
    </tr>
            <tr>
        <td class="normal" style="text-align: left;">
        <img src="http://gpxplus.net/files/images/achievements/locked.gif" alt="" /></td>
        <td class="normal" nowrap="nowrap">Smart Shopper</td>
        <td class="light">Buy 10 items from the FujiShop in 1 day</td>
    </tr>
            <tr>
        <td class="normal" style="text-align: left;">
        <img src="http://gpxplus.net/files/images/achievements/locked.gif" alt="" /></td>
        <td class="light" nowrap="nowrap">Life Savings</td>
        <td class="normal">Have at least 100,000 Fuji Bucks at hand at one time</td>
    </tr>
            <tr>
        <td class="normal" style="text-align: left;">
        <img src="http://gpxplus.net/files/images/achievements/locked.gif" alt="" /></td>
        <td class="normal" nowrap="nowrap">Loss for Words</td>
        <td class="light">Post a topic or post with exactly (no more or less) 1,500 words that follows the rules</td>
    </tr>       
</table>
</div>
</body>
</html>

See if it is perfect.

http://www.webartzforum.com

9Decorate Tables Empty Re: Decorate Tables Wed Feb 17, 2010 2:54 am

MrMega

MrMega
Registered Member
Registered Member
Works perfect, thank you Very Happy

10Decorate Tables Empty Re: Decorate Tables Wed Feb 17, 2010 2:56 am

Sanket

Sanket
Administrator
Administrator
Glad i could help.

Solved | Locked

http://www.webartzforum.com

Sponsored content


View previous topic View next topic Back to top  Message [Page 1 of 1]

WebArtz - The Web Design Forum » Web Designing & Coding » HTML (Hyper Text Markup Language) » Decorate Tables

Permissions in this forum:
You cannot reply to topics in this forum