table in CSS

HTML, CSS and anything else that deals with client side capabilities.

Moderator: General Moderators

Post Reply
Greg_BigPhpAmator
Forum Newbie
Posts: 15
Joined: Thu Feb 12, 2009 1:56 pm

table in CSS

Post by Greg_BigPhpAmator »

Can somebody advice me how write this in style.css file?
<code>
<table>
<td>1</td>
<td>2</td>
</table>
</code>

and

<code>
<div>1</div>
<code>
User avatar
Benjamin
Site Administrator
Posts: 6935
Joined: Sun May 19, 2002 10:24 pm

Re: table in CSS

Post by Benjamin »

Code: Select all

 
<style type="text/css">
table.fooBar {
  border-width: 1px 1px 0px 0px;
  border-style: solid;
  border-color: #000000;
}
 
table.fooBar th, table.fooBar td {
  border-width: 0px 0px 1px 1px;
  border-style: solid;
  border-color: #000000;
  padding: 5px;
}
 
table.fooBar th {
  text-align: right;
}
 
table.fooBar td {
  text-align: left;
}
</style>
 
<table class="fooBar">
  <tr>
    <th>1</th>
    <td>2</td>
  </tr>
</table>
</code>
 
??
Greg_BigPhpAmator
Forum Newbie
Posts: 15
Joined: Thu Feb 12, 2009 1:56 pm

Re: table in CSS

Post by Greg_BigPhpAmator »

I meant to write full table in style.css file.

Then call it on seperatly pages (something like include function).
Is that possible?
User avatar
Benjamin
Site Administrator
Posts: 6935
Joined: Sun May 19, 2002 10:24 pm

Re: table in CSS

Post by Benjamin »

You cannot write HTML with CSS, only style it.
User avatar
JAB Creations
DevNet Resident
Posts: 2341
Joined: Thu Jan 13, 2005 6:44 pm
Location: Sarasota Florida
Contact:

Re: table in CSS

Post by JAB Creations »

I think what Greg means is how does he make a tableless layout using divisible elements and CSS.

The key is to understand how CSS level 1 works.

Code: Select all

#content {background-color: #f00; float: left; width: 80%;}#side {background-color: #00f; float: left; width: 20%;}

Code: Select all

<div id="content">content</div><div id="side">side</div>
That's the basics. Look up the CSS box model which is unfortunately listed on the CSS2 page (as emulating a table layout does not require positioning or other CSS2 properties).

Want to add padding to #content or #side? Don't...add margins to their first children...

Code: Select all

#content {background-color: #f00; float: left; width: 80%;}#content div {background-color: #f0f; margin: 20px;}#side {background-color: #00f; float: left; width: 20%;}#side div {background-color: #0f0; margin: 20px;}

Code: Select all

<div class="parent" id="content"><div class="first_child_of_content">content</div></div><div class="parent" id="side"><div class="first_child_of_side">side</div></div>
If you DO NOT float and DO NOT set any width (except for auto) the block level element (divisible element is the generic block level element while span is the generic inline level element) will automatically take up 100% of the available width...but it's margin, padding, and or any border set will not add beyond 100%...it'll in total = 100%. The moment you float or set any width (besides auto) the block-level element will add border, margin, and/or any padding you've set. In such circumstances reverse how you think about margin and padding and don't be shy about using an extra divisible element to achieve your layout.

...but don't use div elements for tabular data...don't be extreme in either case. If it's tabular data use a table...and if it's not then use divisible elements. Good luck! :)

*edit* Added background-color to CSS to give an easy visual. :wink:
User avatar
JAB Creations
DevNet Resident
Posts: 2341
Joined: Thu Jan 13, 2005 6:44 pm
Location: Sarasota Florida
Contact:

Re: table in CSS

Post by JAB Creations »

...also this thread belongs in the client forum.
User avatar
panic!
Forum Regular
Posts: 516
Joined: Mon Jul 31, 2006 7:59 am
Location: Brighton, UK

Re: table in CSS

Post by panic! »

JAB Creations wrote: If you DO NOT float and DO NOT set any width (except for auto) the block level element (divisible element is the generic block level element while span is the generic inline level element) will automatically take up 100% of the available width...

Although that is meant to be true, remember ie7 annoyingly fits divs to the size of their content like a span unless you define a width, it's very, very annoying.
Post Reply