| Author |
Message / Information |
Kwama King
|
CSS tables for your forum..
replied on: 11/30/2003 8:53:22 PM
they load faster!!!!
i wrote this up for fetor, but its open for the public!
CSS TABLES
m'k d00d, this is how you do tables and **** with CSS.. first of all, there are a few things you need to know.. DIV inserts a break, and span doesnt..  k, now you have ID and CLASS, ID = # CLASS = .
in the CSS, do this:
<style type="text/css">
<!--
#table
{
background-color: #000000;
padding: 10px;
width: 200px;
border-color: #FF0000;
border-width: 3px;
}
.table
{
background-color: #FFFFFF;
padding: 5px;
width: 150px;
border-color: #000000;
border-width: 5px;
}
-->
</style>
now we have an id and a class, but you dont have to use both, you can just use class, or just use id, or use them both.. now that you have that in your CSS, to put that on the page, do something like this..
<body>
<div align="center">
<div id="table"> <!-- this is the # in the CSS -->
<div align="center">
this is the title
</div>
</div>
<div class="table"> <!-- this is the class in the CSS the one with the dot -->
<div align="center">
this is the content of jour table
</div>
</div>
</div>
</body>
and d00d, you can also use span, and p tags.. you dont have to use DIV.. hmm, lemme show you something.. i believe to be. quite impressive..  and i want you to know, that its 8:18 pm, and i am typing all of this without reference, and im doing it pretty damn fast..
<html>
<head>
<title>Untitled Document</title>
<style type="text/css">
<!--
body
{
background-color: #000000;
padding: 10px;
color: #FFFFFF;
font-family: verdana;
font-size: 11px;
}
#maintable
{
background-color: #660000;
border-color: #FFFFFF;
border-width: 1px;
padding: 15px;
font-family: verdana;
font-size: 11px;
width: 700px;
}
.tableheader
{
background-color: #333333;
color: #FFFFFF;
font-weight: bold;
padding: 3px;
width: 500px;
}
.tableinner
{
background: transparent;
color: #FFFFFF;
padding: 5px;
width: 500px;
}
a:link
{
color: #FFFFFF;
}
a:hover
{
color: #660000;
font-weight: bold;
}
a:visited
{
color: #FFFFFF;
}
a:active
{
color: #FFFFFF;
}
-->
</style>
</head>
<body>
<div align="center">
<div id="maintable">
<div align="center">
<div class="tableheader">
<div align="center">
Header
</div>
</div>
<div class="tableinner">
<div align="center">
HERE FETOR.. E-MAIL ME! <br />
<a href="mailto:slipnotk@hotmail.com">HERE!</a>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
ITS NOW 8:29..
see how fast i typed all that raw code? and another thing, yes its good to have those indentions, because it saves database room..
|
|
