Solved

CSS Table Attributes

Posted on 2003-11-24
5
35,414 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

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.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

710 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