Solved

CSS Table Attributes

Posted on 2003-11-24
5
35,405 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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

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…
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…

914 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

Need Help in Real-Time?

Connect with top rated Experts

16 Experts available now in Live!

Get 1:1 Help Now