Solved

CSS Table Attributes

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

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
From one to two column layout using flex with a different order of inner divs. 1 29
Add shadow behind div 5 25
CSS SASS 4 34
Fix Form size HTML 16 15
As a result of several questions about how to use Bootstrap I thought it would be a good idea to write down the development aspect of creating a Bootstrapped website in as little time as possible. Part 1 of this article will only concentrate on g…
When writing CSS, there are a few simple rules that will make your life easier.    1. Using ‘* {box-sizing:border-box;}’. Using this will wrap all your elements in a nice little compact box-model that will give you the width you want, like so... …
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 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 …

828 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