7 replies [Last post]
sagacebu
Offline
newbie
Philippines
Last seen: 17 years 5 weeks ago
Philippines
Joined: 2004-08-16
Posts: 3
Points: 0

Hello, i'm quite new to CSS. just got to learning it. is it possible to define different table properties in css? like create a class for each table? complete with how many columns & rows and other table properties? Can this be done?

co2
co2's picture
Offline
Leader
UK
Last seen: 13 years 22 weeks ago
UK
Joined: 2003-09-17
Posts: 721
Points: 0

Can I Create Tables with CSS?

Yes, you can define all style properties for a table using id's and classes (or universal selector).

However, you must remember not to confuse CSS's role in markup. Whilst you could alter the padding, margins, backgrounds, borders, sizes etc., what you can't control via CSS is the tables structural properties such as how many rows or columns, or where a tbody goes.

These are purely structural concerns, thus, are required to be specified in the HTML markup.

Smile

The next sentence is true. The previous sentence is false. Discuss...

sagacebu
Offline
newbie
Philippines
Last seen: 17 years 5 weeks ago
Philippines
Joined: 2004-08-16
Posts: 3
Points: 0

Can I Create Tables with CSS?

I appreciate the help. Can you give me an example how define all style properties for a table using id's and classes (or universal selector) in css.
Below is my style sheet. so far it has defined some for text only:
<!-- Test Style Sheet01 -->
body
{
background-color: white;
font-family: Arial;
}

h1 /* heading 1 */
{
font-family: Arial;
color: darkblue;
font size: 18pts;
text-align: center;
}

h2 /* heading 2 */
{
font-family: Arial;
font-style: italic;
color: darkred;
font size: 16pts;
text-align: left;
}

p.para1
{
font-family: Arial;
font weight: bold;
color: darkblue;
font size: 10pts;
text-align: justify;
}

p.para2
{
font-family: Arial;
font-weight: "bold";
color: mediumblue;
font size: 10pts;
text-align: left;
}

p.para3
{
font-family: Arial;
font-weight: "bold";
color: lightblue;
font size: 10pts;
text-align: center;
}
td
{
font-family: Arial, Helvetica, sans-serif;
}

th
{
font-family: Arial, Helvetica, sans-serif;
}

Below is the html:
<html>
<head>
<title>Test Html</title>

<link REL="stylesheet" TYPE="text/css" href="style1.css">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<h1>RuralNet</h1>
<h2>RuralNet</h2>
<p class="para1"><font face="Arial, Helvetica, sans-serif">the quick brown fox jumps over the
lazy dog at the bank of the river. the cat come rush to the kitchen and eat
so fast. the quick brown fox jumps over the lazy dog at the bank of the river.
the cat come rush to the kitchen and eat so fast. the quick brown fox jumps
over the lazy dog at the bank of the river. the cat come rush to the kitchen
and eat so fast. the quick brown fox jumps over the lazy dog at the bank of
the river. the cat come rush to the kitchen and eat so fast. the quick brown
fox jumps over the lazy dog at the bank of the river. the cat come rush to the
kitchen and eat so fast. the quick brown fox jumps over the lazy dog at the
bank of the river. the cat come rush to the kitchen and eat so fast. the quick
brown fox jumps over the lazy dog at the bank of the river. the cat come rush
to the kitchen and eat so fast. </font></p>
<p class="para2">The quick brown fox jumps over the lazy dog at the bank of the river. the cat
come rush to the kitchen and eat so fast. the quick brown fox jumps over the
lazy dog at the bank of the river. the cat come rush to the kitchen and eat
so fast. the quick brown fox jumps over the lazy dog at the bank of the river.
the cat come rush to the kitchen and eat so fast. the quick brown fox jumps
over the lazy dog at the bank of the river. the cat come rush to the kitchen
and eat so fast. the quick brown fox jumps over the lazy dog at the bank of
the river. the cat come rush to the kitchen and eat so fast. the quick brown
fox jumps over the lazy dog at the bank of the river. the cat come rush to the
kitchen and eat so fast. the quick brown fox jumps over the lazy dog at the
bank of the river. the cat come rush to the kitchen and eat so fast.</class>
</p>
<p class="para3">the quick brown fox jumps over the
lazy dog at the bank of the river. the cat come rush to the kitchen and eat
so fast. the quick brown fox jumps over the lazy dog at the bank of the river.
the cat come rush to the kitchen and eat so fast. the quick brown fox jumps
over the lazy dog at the bank of the river. the cat come rush to the kitchen
and eat so fast. the quick brown fox jumps over the lazy dog at the bank of
the river. the cat come rush to the kitchen and eat so fast. the quick brown
fox jumps over the lazy dog at the bank of the river. the cat come rush to the
kitchen and eat so fast. the quick brown fox jumps over the lazy dog at the
bank of the river. the cat come rush to the kitchen and eat so fast. the quick
brown fox jumps over the lazy dog at the bank of the river. the cat come rush
to the kitchen and eat so fast.</p>
<p>&nbsp;
</body>
</html>

Thats the stylesheet without properties for tables.
also when i test the html in my browser it doesnt show some text bold.
I've been doing some reading myself. But so far i have been reading some basic stuff about css. from my source it doesnt cover tables.

Thank you very much for your help. I'm really confused with this css thing.

The Finch
Offline
Enthusiast
Cincinnati
Last seen: 17 years 7 weeks ago
Cincinnati
Timezone: GMT-5
Joined: 2004-08-01
Posts: 65
Points: 0

Can I Create Tables with CSS?

You should get rid of the quotation marks around the word bold in your css (I don't think gecko browsers will read that). Those </font> and </class> tags may also be part of your problem.

As for tables, I attached some html that shows some things you can do with tables and css.

For all the information on tables, check out
http://www.w3.org/TR/CSS21/tables.html

and bowdoin.edu has a good page on this.

sagacebu
Offline
newbie
Philippines
Last seen: 17 years 5 weeks ago
Philippines
Joined: 2004-08-16
Posts: 3
Points: 0

Can I Create Tables with CSS?

Thanks you have been a great help.

It works fine now. I have finally got the text to be bold and controlled a few.

I have taken out those </font> & </class> from the html. also i removed font-family: arial from the body section.
<!-- Test Style Sheet01 -->

body
{
background-color: white;
}
h1 /* heading 1 */
{
font:bold 60px arial;
color:darkblue;
text-align:center;
}

h2 /* heading 2 */
{
font:bold 24px arial;
color:mediumblue;
text-align:left;
}

p.para1
{
font:bold 12px arial;
color: black;
text-align:justify;
}

p.para2
{
font:normal 12px arial;
color: darkblue;
text-align:left;
}

p.para3
{
font:bold 10px arial;
color: maroon;
text-align:right;
}

td
{
font-family: Arial, Helvetica, sans-serif;
}

th
{
font-family: Arial, Helvetica, sans-serif;
}
my html is as follows:
<html>
<head>
<title>Test Html</title>

<link REL="stylesheet" TYPE="text/css" href="style1.css">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<h1>RuralNet</h1>
<h2>RuralNet</h2>
<p class="para1">the quick brown fox jumps over the
lazy dog at the bank of the river. the cat come rush to the kitchen and eat
so fast. the quick brown fox jumps over the lazy dog at the bank of the river.
the cat come rush to the kitchen and eat so fast. the quick brown fox jumps
over the lazy dog at the bank of the river. the cat come rush to the kitchen
and eat so fast. the quick brown fox jumps over the lazy dog at the bank of
the river. the cat come rush to the kitchen and eat so fast. the quick brown
fox jumps over the lazy dog at the bank of the river. the cat come rush to the
kitchen and eat so fast. the quick brown fox jumps over the lazy dog at the
bank of the river. the cat come rush to the kitchen and eat so fast. the quick
brown fox jumps over the lazy dog at the bank of the river. the cat come rush
to the kitchen and eat so fast.</p>
<p class="para2">The quick brown fox jumps over the lazy dog at the bank of the river. the cat
come rush to the kitchen and eat so fast. the quick brown fox jumps over the
lazy dog at the bank of the river. the cat come rush to the kitchen and eat
so fast. the quick brown fox jumps over the lazy dog at the bank of the river.
the cat come rush to the kitchen and eat so fast. the quick brown fox jumps
over the lazy dog at the bank of the river. the cat come rush to the kitchen
and eat so fast. the quick brown fox jumps over the lazy dog at the bank of
the river. the cat come rush to the kitchen and eat so fast. the quick brown
fox jumps over the lazy dog at the bank of the river. the cat come rush to the
kitchen and eat so fast. the quick brown fox jumps over the lazy dog at the
bank of the river. the cat come rush to the kitchen and eat so fast.
</p>
<p class="para3">the quick brown fox jumps over the
lazy dog at the bank of the river. the cat come rush to the kitchen and eat
so fast. the quick brown fox jumps over the lazy dog at the bank of the river.
the cat come rush to the kitchen and eat so fast. the quick brown fox jumps
over the lazy dog at the bank of the river. the cat come rush to the kitchen
and eat so fast. the quick brown fox jumps over the lazy dog at the bank of
the river. the cat come rush to the kitchen and eat so fast. the quick brown
fox jumps over the lazy dog at the bank of the river. the cat come rush to the
kitchen and eat so fast. the quick brown fox jumps over the lazy dog at the
bank of the river. the cat come rush to the kitchen and eat so fast. the quick
brown fox jumps over the lazy dog at the bank of the river. the cat come rush
to the kitchen and eat so fast.</p>
<p>&nbsp;
</body>
</html>
Its really great. I am grateful to you guys. But im not done yet. im a little confused with these tables. ill try to do it on my own. but i will be back to post more questions if i can't handle it.

Thanks again Finch! Thanks to you too CO2

brockly
Offline
Regular
Kent England
Last seen: 17 years 4 weeks ago
Kent England
Joined: 2004-08-18
Posts: 22
Points: 0

You can go in to more detail with tables and css

Ok im just learning css too but this is what i use for my tables,

TABLE{
border-color:#55698A;
background-color:#212D50;
color:#FFFFCC;
}

TD{
border-color:#55698A;
}

.a TABLE{
border-color:#ccffff;
background-color:#212D50;
color:#FFFFCC;
}

.a TD{
border-color:#ccffff;
}

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 25 weeks 6 days ago
Joined: 2004-06-30
Posts: 9674
Points: 810

Can I Create Tables with CSS?

If you have repeated hex values, you can shorten them:

#ccffff becomes #cff

You split it into twos, and take the first one, so:

#ccddee becomes #cde

however #f7f3ef must stay like that

but #f7f3ee can become #f7f3e

Verschwindende wrote:
  • CSS doesn't make pies

brockly
Offline
Regular
Kent England
Last seen: 17 years 4 weeks ago
Kent England
Joined: 2004-08-18
Posts: 22
Points: 0

Thanks thepineapplehead

I never know that i have changed my style sheet acordingly, should make things that little more easy.