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&nbsp;</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">
                <a href="mailto:[e-mail]"><span style="font-size: 10pt; font-family: 'Tahoma','sans-serif'">[e-mail]</span></a></p>
            <p style="margin: 0in 0in 0pt; line-height: normal">
                <a href="mailto:[e-mail]"><u><span style="font-size: 10pt; font-family: 'Tahoma','sans-serif'">[e-mail]&nbsp;</span></u></a></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>
&nbsp;</div>
<p id="heading">
Troops</p>
<p>
&nbsp;</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">
        <a  href="mailto:[e-mail]">[e-mail]</a><br />
            <a href="mailto:tomjones.net">tomjones.net</a></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">
        <a href="mailto:[e-mail]">[e-mail]</a><br />
            <a href="mailto:tomjones.net">tomjones.net</a></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.