table in CSS
Moderator: General Moderators
-
Greg_BigPhpAmator
- Forum Newbie
- Posts: 15
- Joined: Thu Feb 12, 2009 1:56 pm
table in CSS
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>
<code>
<table>
<td>1</td>
<td>2</td>
</table>
</code>
and
<code>
<div>1</div>
<code>
Re: table in CSS
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
I meant to write full table in style.css file.
Then call it on seperatly pages (something like include function).
Is that possible?
Then call it on seperatly pages (something like include function).
Is that possible?
Re: table in CSS
You cannot write HTML with CSS, only style it.
- JAB Creations
- DevNet Resident
- Posts: 2341
- Joined: Thu Jan 13, 2005 6:44 pm
- Location: Sarasota Florida
- Contact:
Re: table in CSS
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.
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...
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.
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>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>...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.
- JAB Creations
- DevNet Resident
- Posts: 2341
- Joined: Thu Jan 13, 2005 6:44 pm
- Location: Sarasota Florida
- Contact:
Re: table in CSS
...also this thread belongs in the client forum.
Re: table in CSS
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.