Hi all
how would I convert this to CSS:
<table border="1" align="center" cellpadding="6" cellspacing="0" bordercolor="#000000">
could I have this in the tag still?
i.e.
<table style="stuff in here">
Cheers
ChrisCan anyone suggest a website that whould help me with this.
Chris<table cellspacing="0" style="border: 1px solid #000000; text-align: center;">
<tr>
<td style="padding: 6px;"></td>
</tr>
Note: there is no CSS declaration for cellspacing so that needs to stay as is.
hope this helpsOriginally posted by cybercampbell
Can anyone suggest a website that whould help me with this.
Chris
try w3Schools (<!-- m --><a class="postlink" href="http://www.w3schools.com/css/default.asp">http://www.w3schools.com/css/default.asp</a><!-- m -->)Thanks for that....but,
It didn't align the table in the center and it only put a 1px black box around the the whole table and not the boders of all the internal cells.
this is exantly what I need:
<table width="100" border="1" align="center" cellpadding="0" cellspacing="0" bordercolor="#000000">
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
If you look at this in a browser it is centered and All the cells have a 1px black border.
This works fine but I would like to use valid HTML, so I was told to use CSS (which I don't know very well......yet)
what are your thoughts?
thanks
Chris<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test table</title>
<style type="text/css">
#myTable {
}
</style>
</head>
<body>
<table id="myTable" cellspacing="0">
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</body>
</html>
Step 1: give the table an id (id="myTable"), get rid of all the HTML styling and then create a location somewhere in the head for styles. NOTE: ID names in your HTML must remain unique and referenced in you CSS using a #. If you want to write CSS for multiple items use class="" and reference it with a . (period) will show later.
<style type="text/css">
#myTable {
width: 100px;
border: 1px solid black;
}
</style>
}
Step 2: set the width on the table using css. Set the border to 1 pixel solid line color black. This is fine except it doesn't give us the desired cell borders.
<style type="text/css">
#myTable {
width: 100px;
border: 1px solid black;
}
#myTable td {
padding: 6px;
border: 1px solid black;
}
</style>
Step 3: (this rule applies to all tds for the myTable table) set our cell padding to 6 pixels and add the 1 pixel borders for the cells. Interesting when we do this we get borders for all cells actually creating a 2 pixel border for all cells. Now we have to be a little tricky and set border widths per side of each cell. There is a border-width declaration that allows you to set widths per side of a block level element: works like this:
border-width: topSideWidth rightSideWidth bottomSideWidth leftSideWidth;
so
border-width: 1px 2px 3px 4px;
will give us a 1pixel top border, a 2pixel right side border, a 3pixel bottom side border and a 4 pixel left side border.
<style type="text/css">
#myTable {
width: 100px;
border: 1px solid black;
border-width: 2px 1px 1px 2px;
}
#myTable td {
padding: 6px;
border: 1px solid black;
border-width: 0 1px 1px 0;
}
</style>
Step 4: modifies the border widths to generate a 2pixel border around the table and 1 pixel borders for the cells, or at least the illusion of such, the texed centered in the cells may appear 1 pixel off. if you don't want a 2 pixel border around the table set border-width: 1px 0 0 1px;. This leaves us with the centering requirement. Here we have two options we can write a rule for the entire document portion of the page like this:
body {
text-align: center;
}
which will center everything on the page
or we can wrap your table in a div and give it a name so we can write some css for it like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test table</title>
<style type="text/css">
.allMyDivs {
text-align: center;
}
#myTable {
width: 100px;
border: 1px solid black;
border-width: 2px 1px 1px 2px;
}
#myTable td {
padding: 6px;
border: 1px solid black;
border-width: 0 1px 1px 0;
}
</style>
</head>
<body>
<div class="allMyDivs">
<table id="myTable" cellspacing="0">
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</div>
</body>
</html>
This completes the requirement and the CSS 101 class. Please notice that the .allMyDivs class is referenced with a . (period) - this allows me to have another div element with a class name of "allMyDivs".
Good luck, happy CSSing and best wishes.Originally posted by lcscne
Note: there is no CSS declaration for cellspacing so that needs to stay as is.
Actually, there is (along with the 'border-spacing' property'). (<!-- m --><a class="postlink" href="http://www.w3.org/TR/REC-CSS2/tables.html#propdef-border-collapse">http://www.w3.org/TR/REC-CSS2/tables.ht ... r-collapse</a><!-- m -->)
Originally posted by lcscne
body {
text-align: center;
}
If you have a valid DTD, then the text-align: center; is only needed to make IE 5 play nice. The correct way to center something would be to apply margin: auto; along with a width to the element.
how would I convert this to CSS:
<table border="1" align="center" cellpadding="6" cellspacing="0" bordercolor="#000000">
could I have this in the tag still?
i.e.
<table style="stuff in here">
Cheers
ChrisCan anyone suggest a website that whould help me with this.
Chris<table cellspacing="0" style="border: 1px solid #000000; text-align: center;">
<tr>
<td style="padding: 6px;"></td>
</tr>
Note: there is no CSS declaration for cellspacing so that needs to stay as is.
hope this helpsOriginally posted by cybercampbell
Can anyone suggest a website that whould help me with this.
Chris
try w3Schools (<!-- m --><a class="postlink" href="http://www.w3schools.com/css/default.asp">http://www.w3schools.com/css/default.asp</a><!-- m -->)Thanks for that....but,
It didn't align the table in the center and it only put a 1px black box around the the whole table and not the boders of all the internal cells.
this is exantly what I need:
<table width="100" border="1" align="center" cellpadding="0" cellspacing="0" bordercolor="#000000">
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
If you look at this in a browser it is centered and All the cells have a 1px black border.
This works fine but I would like to use valid HTML, so I was told to use CSS (which I don't know very well......yet)
what are your thoughts?
thanks
Chris<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test table</title>
<style type="text/css">
#myTable {
}
</style>
</head>
<body>
<table id="myTable" cellspacing="0">
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</body>
</html>
Step 1: give the table an id (id="myTable"), get rid of all the HTML styling and then create a location somewhere in the head for styles. NOTE: ID names in your HTML must remain unique and referenced in you CSS using a #. If you want to write CSS for multiple items use class="" and reference it with a . (period) will show later.
<style type="text/css">
#myTable {
width: 100px;
border: 1px solid black;
}
</style>
}
Step 2: set the width on the table using css. Set the border to 1 pixel solid line color black. This is fine except it doesn't give us the desired cell borders.
<style type="text/css">
#myTable {
width: 100px;
border: 1px solid black;
}
#myTable td {
padding: 6px;
border: 1px solid black;
}
</style>
Step 3: (this rule applies to all tds for the myTable table) set our cell padding to 6 pixels and add the 1 pixel borders for the cells. Interesting when we do this we get borders for all cells actually creating a 2 pixel border for all cells. Now we have to be a little tricky and set border widths per side of each cell. There is a border-width declaration that allows you to set widths per side of a block level element: works like this:
border-width: topSideWidth rightSideWidth bottomSideWidth leftSideWidth;
so
border-width: 1px 2px 3px 4px;
will give us a 1pixel top border, a 2pixel right side border, a 3pixel bottom side border and a 4 pixel left side border.
<style type="text/css">
#myTable {
width: 100px;
border: 1px solid black;
border-width: 2px 1px 1px 2px;
}
#myTable td {
padding: 6px;
border: 1px solid black;
border-width: 0 1px 1px 0;
}
</style>
Step 4: modifies the border widths to generate a 2pixel border around the table and 1 pixel borders for the cells, or at least the illusion of such, the texed centered in the cells may appear 1 pixel off. if you don't want a 2 pixel border around the table set border-width: 1px 0 0 1px;. This leaves us with the centering requirement. Here we have two options we can write a rule for the entire document portion of the page like this:
body {
text-align: center;
}
which will center everything on the page
or we can wrap your table in a div and give it a name so we can write some css for it like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test table</title>
<style type="text/css">
.allMyDivs {
text-align: center;
}
#myTable {
width: 100px;
border: 1px solid black;
border-width: 2px 1px 1px 2px;
}
#myTable td {
padding: 6px;
border: 1px solid black;
border-width: 0 1px 1px 0;
}
</style>
</head>
<body>
<div class="allMyDivs">
<table id="myTable" cellspacing="0">
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</div>
</body>
</html>
This completes the requirement and the CSS 101 class. Please notice that the .allMyDivs class is referenced with a . (period) - this allows me to have another div element with a class name of "allMyDivs".
Good luck, happy CSSing and best wishes.Originally posted by lcscne
Note: there is no CSS declaration for cellspacing so that needs to stay as is.
Actually, there is (along with the 'border-spacing' property'). (<!-- m --><a class="postlink" href="http://www.w3.org/TR/REC-CSS2/tables.html#propdef-border-collapse">http://www.w3.org/TR/REC-CSS2/tables.ht ... r-collapse</a><!-- m -->)
Originally posted by lcscne
body {
text-align: center;
}
If you have a valid DTD, then the text-align: center; is only needed to make IE 5 play nice. The correct way to center something would be to apply margin: auto; along with a width to the element.