How would I use css to create one style to apply to an entire table so that each table column can be formatted differently? I created an example below (which I know is incorrect) to better illustrate my question.
.data {
table:td1: font: bold 8pt/11pt arial, helvetica, sans;
table:td2: font: normal 8pt/11pt arial, helvetica, sans;
table:td3: font: bold 12pt/12pt arial, helvetica, sans;
}
Thanks
-cmotortd.1{background:#000;}
<td class="1">The only CSS properties which can be applied to columns and column groups are background, border, width, and visibility. Therefore you would need to assign a class to each TD which is to have a different font, for example:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang='en'>
<head>
<META HTTP-EQUIV='Content-Type' CONTENT='text/html; charset=ISO-8859-1'>
<title>Page title</title>
<style type="text/css">
<!--
table {
border-collapse: collapse;
border: solid 2px black;
font: 12pt arial, helvetica, sans-serif;
}
thead {
border: solid 2px black;
}
td, th {
border: solid 1px black;
padding: 3px 5px;
}
td {
font-size: 8pt;
line-height: 11pt;
}
/* IDs for columns: */
#one, #three {
background-color: #ccc;
}
#two {
background-color: aqua;
}
/* class for third column cells: */
.three {
font-size: 12pt;
line-height: 12pt;
}
-->
</style>
</head>
<body>
<table summary="sample table">
<colgroup>
<col id=one>
<col id=two>
<col id=three>
</colgroup>
<thead><th>Col 1</th><th>Col 2</th><th>Col 3</th></thead>
<tr><td>Row 1 Col 1</td><td>Row 1 Col 2</td><td class=three>Row 1 Col 3</td></tr>
<tr><td>Row 2 Col 1</td><td>Row 2 Col 2</td><td class=three>Row 2 Col 3</td></tr>
<tr><td>Row 3 Col 1</td><td>Row 3 Col 2</td><td class=three>Row 3 Col 3</td></tr>
</table>
</body>
</html>This is not exactly what I am trying to do, but I appreciate the suggestion. My table content will be displayed by link to a MySQL database. <table href=http://www.webdeveloper.com/forum/archive/index.php/"database" class="data"></table>. There will be no <tr> or <td> tags written into the html to insert individual class tags into. This is why I want one class tag to apply to the <table> tag that will define formatting for each column. My database will have 3 coloumns. I hope my question is more clear.I dont think you can write tables without td and tr tags....
If I were writing code that displays records in a table, I would display each record within a <tr></tr> and each field within a <td></td>. Then you will be able to format each column with the code above.
Hope that helps
BrewWhatever script/program you're using to access the database is going to output <tr>'s and <td>'s. The only way you'll be able to have different font sizes in different columns is by modifying that script/program to add class=name attributes to the <td>'s which need to be different from the other columns.
.data {
table:td1: font: bold 8pt/11pt arial, helvetica, sans;
table:td2: font: normal 8pt/11pt arial, helvetica, sans;
table:td3: font: bold 12pt/12pt arial, helvetica, sans;
}
Thanks
-cmotortd.1{background:#000;}
<td class="1">The only CSS properties which can be applied to columns and column groups are background, border, width, and visibility. Therefore you would need to assign a class to each TD which is to have a different font, for example:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang='en'>
<head>
<META HTTP-EQUIV='Content-Type' CONTENT='text/html; charset=ISO-8859-1'>
<title>Page title</title>
<style type="text/css">
<!--
table {
border-collapse: collapse;
border: solid 2px black;
font: 12pt arial, helvetica, sans-serif;
}
thead {
border: solid 2px black;
}
td, th {
border: solid 1px black;
padding: 3px 5px;
}
td {
font-size: 8pt;
line-height: 11pt;
}
/* IDs for columns: */
#one, #three {
background-color: #ccc;
}
#two {
background-color: aqua;
}
/* class for third column cells: */
.three {
font-size: 12pt;
line-height: 12pt;
}
-->
</style>
</head>
<body>
<table summary="sample table">
<colgroup>
<col id=one>
<col id=two>
<col id=three>
</colgroup>
<thead><th>Col 1</th><th>Col 2</th><th>Col 3</th></thead>
<tr><td>Row 1 Col 1</td><td>Row 1 Col 2</td><td class=three>Row 1 Col 3</td></tr>
<tr><td>Row 2 Col 1</td><td>Row 2 Col 2</td><td class=three>Row 2 Col 3</td></tr>
<tr><td>Row 3 Col 1</td><td>Row 3 Col 2</td><td class=three>Row 3 Col 3</td></tr>
</table>
</body>
</html>This is not exactly what I am trying to do, but I appreciate the suggestion. My table content will be displayed by link to a MySQL database. <table href=http://www.webdeveloper.com/forum/archive/index.php/"database" class="data"></table>. There will be no <tr> or <td> tags written into the html to insert individual class tags into. This is why I want one class tag to apply to the <table> tag that will define formatting for each column. My database will have 3 coloumns. I hope my question is more clear.I dont think you can write tables without td and tr tags....
If I were writing code that displays records in a table, I would display each record within a <tr></tr> and each field within a <td></td>. Then you will be able to format each column with the code above.
Hope that helps
BrewWhatever script/program you're using to access the database is going to output <tr>'s and <td>'s. The only way you'll be able to have different font sizes in different columns is by modifying that script/program to add class=name attributes to the <td>'s which need to be different from the other columns.