Solved

CSS Table Attributes

Posted on 2003-11-24
5
35,410 Views
Last Modified: 2012-06-27
I need to add a couple of things to my style sheet but i havent been able to figure out the css equilavant to the html
if someone could show me id appreciate:

table properties:

border="1"
bordercolor="#8FA0BA"
style="border-collapse: collapse"

and also how do you specify cell padding and cell spacing values in css

Thank You.
0
Comment
Question by:HeadAcheMike
  • 3
5 Comments
 
LVL 15

Accepted Solution

by:
Timbo87 earned 40 total points
ID: 9814908
table {border: 1px; border-color: #8FA0BA; border-collapse: collapse;}

Padding and spacing are done with {padding: 1px; spacing: 1px;}
0
 
LVL 15

Expert Comment

by:Timbo87
ID: 9814915
To clarify, you'd add them into the table like this:

table {border: 1px; border-color: #8FA0BA; border-collapse: collapse;padding: 1px; spacing: 1px;}

This would change all the tables on the page with that style defined. To make multiple table styles you'd do it like this:

.mytable1 {border: 1px; border-color: #8FA0BA; border-collapse: collapse;}

And use it like this:

<table class=mytable1>
<tr>
<td>
blah
</td>
</tr>
</table>

More on CSS here: http://www.w3schools.com/css
0
 
LVL 15

Expert Comment

by:Timbo87
ID: 9814924
Oops, typo there. There is no "spacing" style but you can use padding and margins to accomplish the same thing. There are examples at the web site above.
0
 
LVL 31

Expert Comment

by:seanpowell
ID: 9814934
These are pretty much "visually' the same, except for the minor difference caused by the lack of a cellspacing attribute in CSS:

<html>
<head>
<style>
<!--
TD.myclass         { border: solid 1px; padding:8px; }
-->
</style>
</head>
<body>
<table border="1" bordercolor="#8FA0BA" style="border-collapse:collapse" cellpadding="4" cellspacing="4" width="400">
  <tr>
    <td>1</td>
    <td>2</td>
  </tr>
  <tr>
    <td>3</td>
    <td>4</td>
  </tr>
</table>
<p><br></p>
<table style="border:1px solid #8FA0BA; border-collapse:collapse; width:400px;">
  <tr>
    <td class="myclass">1</td>
    <td class="myclass">2</td>
  </tr>
  <tr>
    <td class="myclass">3</td>
    <td class="myclass">4</td>
  </tr>
</table>
</body>
</html>
0
 
LVL 2

Author Comment

by:HeadAcheMike
ID: 9814983
Thank you for all comments, much appreciated.
0

Featured Post

Problems using Powershell and Active Directory?

Managing Active Directory does not always have to be complicated.  If you are spending more time trying instead of doing, then it's time to look at something else. For nearly 20 years, AD admins around the world have used one tool for day-to-day AD management: Hyena. Discover why

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Creating a CSS block that only applies to printing By default, all of your CSS applies to every possible view of your page - whether on screen, printed, landscape, touch-screen, or whatever.  You can, however, add CSS that only applies under certai…
This is a how to build your own CSS3 slideshow and when I say CSS3 I mean just CSS with no javascript in sight! There a few examples online of how to do this but most just show you an example without any explanation, others make it more complicat…
In this Micro Tutorial users will learn how to embed custom fonts into websites using @font-face in CSS Select a font: Ensure the EULA allows you to use @font-face: Download the font: Get the browser-compatible files you need: Edit your CSS       - Name …
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …

809 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question