Moving from HTML styling to CSS styling - html

Question

I currently have the following table definition:
<table border="1" cellspacing="0" bordercolor="#CEDFEF" cellpadding="1">
I am trying to transform it to CSS, using:
table{border:1px solid #CEDFEF;cellspacing = 0px;cellpadding = 1px}
The table doesn't render as it should, though. What am I doing wrong?
Secondarily, if I want to not apply this styling to one of my tables in specific, how do I do so?

Answer 1

I expect problem is with cellpading and/or cellspacing.
This is not valid CSS:
cellspacing = 0px;cellpadding = 1px
There are already some questions about that :
Set cellpadding and cellspacing in CSS?
Why are cellspacing and cellpadding not CSS styles
I hope this helps you.

Answer 2

Here you are & have a good year!
You need to optimize the tables in css with border, paddings and colors versus cellpadding and default stuff. Code for all tables in your site:
table {
width: 100%;
border-collapse: collapse;
border-bottom:1px solid #e1e1e1;
border-top:1px solid #e1e1e1;
margin-bottom: 10px;
background-color: #FFF;
}
table td {
padding: 4px 10px;
border-right:1px solid #e1e1e1;
border-left:1px solid #e1e1e1;
}
table th {
padding: 4px;
text-align: left;
border-right:1px solid #e1e1e1;
border-left:1px solid #e1e1e1;
font-weight: normal;
}
table tr {
border-left:1px solid #e1e1e1;
border-top:1px solid #e1e1e1;
}
and for tables with no common styling just add the class to the table tag (exapmle1):
table.example1 {
width: 100%;
border-collapse: collapse;
border-bottom:0px solid #e1e1e1;
border-top:0px solid #e1e1e1;
margin-bottom: 20px;
padding-bottom: 20px;
background-color: #FFF;
}
table.example1 td {
padding: 0px 0px;
border-right:0px solid #e1e1e1;
border-left:0px solid #e1e1e1;
}
table.exapmle1 th {
padding: 0px;
text-align: left;
border-right:0px solid #e1e1e1;
border-left:0px solid #e1e1e1;
font-weight: normal;
}
table.example1 tr {
border-left:0px solid #e1e1e1;
border-top:0px solid #e1e1e1;
}
Also you can customize many things with more classes...
table.exapmle1 td {
text-align: center;
}
table.exapmle1 td.left {
text-align: left;
font-weight: bold;
}
table.exapmle1 td.right {
text-align: right;
}
and add class to the td tag for example.
Hope this helps.

Answer 3

It is generally not possible to transform the table-related HTML attributes so that the exact appearance is preserved. The main reason is that the HTML attributes have vague definitions and different interpretations in different browsers, as you can see e.g. by viewing a page with the given attributes on IE and Firefox. It is not possible to replicate this browser-dependence in CSS.
The following stylesheet, which assumes that your markup has <table class=t>, tries to replicate a “typical” or “average” rendering of a table with the given attributes:
table.t {
border-collapse: collapse;
border: outset #CEDFEF 2px;
}
table.t th, table.t td {
border: inset #CEDFEF 2px;
padding: 1px;
}
It’s seldom useful to convert presentational HTML attributes to CSS. When designed new or completely rewritten documents, it is better to start from the desired appearance rather than some existing or hypothetical HTML attributes. For example, solid borders usually look better than the outset or inser borders that <table border> creates, and a padding of 1px is seldom appropriate (usually you want either no padding or a few pixels on left and right, none on top and bottom).
General info: Mapping presentational HTML to CSS. See also subsection Tables in section Rendering of the WHATWG HTML5 draft.

Answer 4

This is the another one way in CSS styling..!!
while styling many tables in html, we can follow this way..!!
Hope it is help full
In Css:
#list
{
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
width:100%;
border:dashed;
background-color:#CC0099;
border-bottom:1px dashed;
border-top:1px dashed;
border-collapse:collapse;
}
In Body section, simply we can give the name...!!
<table id="list">