CSS Table Elements - css

Question

I have inherited responsibility for some web page updates and have to work within the parameters of the existing design, but the coding used is all tables with lots of formatting in EVERY table cell. I am getting a headache just trying to work through it. I want to simplify by using styles, and need to have several different styles. Specifically, the table heading is all bold, centered and one font size, so it will get one style for the row. The first column needs to be bold and centered, and the fifth column is centered (but regular font weight). All the other columns are left aligned and regular weight. The rows are alternating between white and colored.
So my question is can I style the rows in two styles to change the color, and then how would I style the 2 columns that need to be bold and/or centered, or do I need to style each cell to make this work?
<tr style="height: 27.75pt">
<td style="padding-right: 5.4pt; padding-left: 5.4pt; background: #d2eaf1; padding-bottom: 0in; border-left: #78c0d4 1pt solid; width: 41.4pt; border-top-color: #f0f0f0; padding-top: 0in; border-bottom: #78c0d4 1pt solid; height: 27.75pt; border-right-color: #f0f0f0" valign="top" width="55">
<p align="center" style="margin: 0in 0in 0pt; line-height: normal; text-align: center">
<strong><span style="font-size: 10pt; color: black; font-family: 'Tahoma','sans-serif'">2</span></strong></p>
</td>
<td style="padding-right: 5.4pt; padding-left: 5.4pt; border-left-color: #f0f0f0; background: #d2eaf1; padding-bottom: 0in; width: 137.8pt; border-top-color: #f0f0f0; padding-top: 0in; border-bottom: #78c0d4 1pt solid; height: 27.75pt; border-right-color: #f0f0f0" valign="top" width="184">
<p style="margin: 0in 0in 0pt; line-height: normal">
<span style="font-size: 10pt; font-family: 'Tahoma','sans-serif'">Grace Episcopal Church</span></p>
</td>
<td style="padding-right: 5.4pt; padding-left: 5.4pt; border-left-color: #f0f0f0; background: #d2eaf1; padding-bottom: 0in; width: 72.45pt; border-top-color: #f0f0f0; padding-top: 0in; border-bottom: #78c0d4 1pt solid; height: 27.75pt; border-right-color: #f0f0f0" valign="top" width="97">
<p style="margin: 0in 0in 0pt; line-height: normal">
<span style="font-size: 10pt; font-family: 'Tahoma','sans-serif'">Nyack</span></p>
</td>
<td style="padding-right: 5.4pt; padding-left: 5.4pt; border-left-color: #f0f0f0; background: #d2eaf1; padding-bottom: 0in; width: 96.85pt; border-top-color: #f0f0f0; padding-top: 0in; border-bottom: #78c0d4 1pt solid; height: 27.75pt; border-right-color: #f0f0f0" valign="top" width="129">
<p style="margin: 0in 0in 0pt; line-height: normal">
<span style="font-size: 10pt; font-family: 'Tahoma','sans-serif'">John Smith</span></p>
<p style="margin: 0in 0in 0pt; line-height: normal">
<span style="font-size: 10pt; font-family: 'Tahoma','sans-serif'">Tom Jones </span></p>
</td>
<td style="padding-right: 5.4pt; padding-left: 5.4pt; border-left-color: #f0f0f0; background: #d2eaf1; padding-bottom: 0in; width: 63pt; border-top-color: #f0f0f0; padding-top: 0in; border-bottom: #78c0d4 1pt solid; height: 27.75pt; border-right-color: #f0f0f0" valign="top" width="84">
<p align="center" style="margin: 0in 0in 0pt; line-height: normal; text-align: center">
<span style="font-size: 10pt; font-family: 'Tahoma','sans-serif'">222-1234</span></p>
<p align="center" style="margin: 0in 0in 0pt; line-height: normal; text-align: center">
<span style="font-size: 10pt; font-family: 'Tahoma','sans-serif'">333-6789</span></p>
</td>
<td style="border-right: #78c0d4 1pt solid; padding-right: 5.4pt; padding-left: 5.4pt; border-left-color: #f0f0f0; background: #d2eaf1; padding-bottom: 0in; width: 147.4pt; border-top-color: #f0f0f0; padding-top: 0in; border-bottom: #78c0d4 1pt solid; height: 27.75pt" valign="top" width="197">
<p style="margin: 0in 0in 0pt; line-height: normal">
<span style="font-size: 10pt; font-family: 'Tahoma','sans-serif'">johnsmith#optonline.net</span></p>
<p style="margin: 0in 0in 0pt; line-height: normal">
<u><span style="font-size: 10pt; font-family: 'Tahoma','sans-serif'">tomjones#att.net </span></u></p>
</td>
</tr>
I have cleaned up most of the code with internal style sheet, but have two remaining issues. The width of each column does not change using width style in each column class. Also, when I change the font size from 11pt to 12 pt it wraps text in two columns and thus throws off the intended design of the table. I'm sure I am missing a fairly easy tweak at this point.
If it matters, I am using a site that has its own wysiwyg front end and I have limited access to source code - I can make some changes but not full control, but this is what I am stuck working with.
<style type="text/css">
.tablestyle {
border: #78c0d4 1pt solid;
cellpadding:none;
cellspacing: none;
border: medium none;
border-collapse: collapse;
width: 740;
table-layout: fixed;
}
#heading {
text-align:center;
line-height:normal;
font-size:26px;
font-family: Arial, Helvetica, sans-serif;
color:#252525;
}
.tablerowblue {
border: #78c0d4 1pt solid;
background: #d2eaf1;
border-right-color: #f0f0f0;
vertical-align:top;
line-height: normal;
font-size: 12px;
color: black;
font-family: Arial, Helvetica, sans-serif;
}
.tablerowwhite {
border: #78c0d4 1pt solid;
background: #ffffff;
vertical-align:top;
line-height: normal;
font-size: 12px;
color: black;
font-family: Arial, Helvetica, sans-serif;
}
.tableheadbold {
padding: 0 5px;
border: #78c0d4 1pt solid;
background: #4bacc6;
border-right-color: #f0f0f0;
vertical-align:top;
text-align: center;
font-size: 12px;
color: black;
font-family: Arial, Helvetica, sans-serif;
font-weight:bold;
}
.col1 {
width: 40;
font-weight:bold;
text-align:center;
border: #78c0d4 1pt solid;
}
.col2 {
width:80;
border: #78c0d4 1pt solid;
padding: 0px 5px;
}
.col3 {
width:70;
border: #78c0d4 1pt solid;
padding: 0px 5px;
}
.col4 {
width:170;
border: #78c0d4 1pt solid;
padding: 0px 5px;
}
.col5 {
width:140;
text-align:center;
border: #78c0d4 1pt solid;
padding: 0px 5px;
}
.col6 {
width:190;
color:black;
border: #78c0d4 1pt solid;
padding: 0px 5px;
}
</style>
<div>
</div>
<p id="heading">
Troops</p>
<p>
</p>
<table class="tablestyle">
<tbody>
<tr class="tableheadbold">
<td>
Troop</td>
<td>
Chartered Organization<br />
Meeting Location</td>
<td>
Town/City</td>
<td>
Unit Leader<br />
Comm. Chair</td>
<td>
Phone</td>
<td>
E-Mail</td>
</tr>
<tr class="tablerowwhite">
<td class="col1">
2</td>
<td class="col2">
Grace Episcopal Church</td>
<td class="col3">
Nyack</td>
<td class="col4">
Leader Name 1<br />
Leader Name 2</td>
<td class="col5">
222-1234<br />
333-6789</td>
<td class="col6">
johnsmith#optonline.net<br />
tomjones.net</td>
</tr>
<tr class="tablerowblue">
<td class="col1">
10</td>
<td class="col2">
Atonement Lutheran Church</td>
<td class="col3">
Stony Point</td>
<td class="col4">
Leader Name 1<br />
Leader Name 2</td>
<td class="col5">
222-1234<br />
333-6789</td>
<td class="col6">
johnsmith#optonline.net<br />
tomjones.net</td>
</tr>
</tbody>
</table>

Answer 1

Use class selectors..
.tableStyle td {
text-align:left;
}
.row_w td {
background-color:#fff;
}
.row_c td {
background-color:#ffc;
}
.col_1 {
font-weight:bold;
text-align:center;
}
.col_5 {
text-align:center;
}
.row_h { /*anytime you want to customize */ }
HTML
<table class="tableStyle" >
<tr class="row_h" ><th ></th>.. <th></td></tr>
<tr class="row_w" ><td class="col_1" ></td>.. <td class="col_5" ></td>... </tr>
<tr class="row_c" ><td class="col_1" ></td>.. <td class="col_5" ></td>... </tr>
</table>
The rest of TDs/THs will follow the style instructed by the TR class style.

Answer 2

You can target a specific td by using the nth-child pseudo selector, that way you won't have to go through all the tds and add a class to them one by one.
A quick demo here : http://jsfiddle.net/Ftb6x/
Not every browser supports it unfortunately : http://caniuse.com/#search=nth-child

Answer 3

The markup looks like it was produced with Microsoft Word. It is difficult to override all the presentational mess there, especially the cell widths set in points, or fractions of points. I would suggest cleaning up the markup. I have a small utility for that. It does not remove the pointless p markup inside cells, but that markup can be effectively ignored in rendering by setting
th p, td p { margin: 0; }
With the cleaned up document, set the font on the page (Arial is boring but better than Tahoma), then table borders, cell spacing, and cell padding reasonably.
Then put the heading cells (I suppose this is what “the table heading” refers to) in a tr that is inside thead, and use th for the cells. They will then be by default bold and centered. They should normally have the same size as the rest of the table, but if desired, make it bigger this way:
thead th { font-size: 110%; }
You might consider making the first column cells th, since they sound like headings, but maybe it is sufficient to set just
td:first-child { text-align: center; font-weight: bold; }
though such styling looks odd for data like in the code snippet – it looks like something that should be left-aligned. Similarly, phone numbers should hardly be centered, but if you insist, this can be done in this case by setting
td:nth-child(5) { text-align: center; }
To set alternating background colors, as in the code snippet posted, use
tr:nth-child(odd) { background: #d2eaf1; }
If someone pays you for extra work needed to make the styling work even on old versions of IE (IE 8 and older), then you can either add column-based styling using col elements or, perhaps better, use the Selectivzr polyfill.