How can I make my cells align text to the left?

Question

I'm making a table with HTML and CSS and I can't seem to get specific cells to align the text to the left.

Here is my table:

<table>
        <tr class="l0">
            <th rowspan="2">Employer/Employee Group</th>
            <th colspan="2">Duty</th>
            <th rowspan="2">Experience (Years)</th>
            <th rowspan="2">No. Of People</th>
            <th colspan="5">Responsibilities</th>
        </tr>
        <tr class="l0">
            <th>Permanent Duty</th>
            <th>As Required</th>
            <th>Job Training</th>
            <th>Product Quality</th>
            <th>Retention</th>
            <th>Human Resources</th>
            <th>Special Projects</th>
        </tr>


        <tr class="l2">
            <th colspan="10">US Army - Colorado Army National Guard</th>
        </tr>
        <tr class="l1">
            <td>Technicians/Soldiers</td>
            <td>*</td>
            <td></td>
            <td>3</td>
            <td>2 - 6</td>
            <td>*</td>
            <td>*</td>
            <td>*</td>
            <td></td>
            <td>*</td>
        </tr>


        <tr class="l2">
            <th colspan="10">SPEC, Inc.</th>
        </tr>
        <tr class="l1">
            <td>Administrative Staff</td>
            <td></td>
            <td>*</td>
            <td rowspan="4">5</td>
            <td>2</td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td>*</td>
        </tr>
        <tr class="l1">
            <td>Engineers and Scientists</td>
            <td></td>
            <td>*</td>
            <td>5</td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td>*</td>
        </tr>
        <tr class="l1">
            <td>Technicians</td>
            <td>*</td>
            <td></td>
            <td>4</td>
            <td>*</td>
            <td>*</td>
            <td>*</td>
            <td>*</td>
            <td>*</td>
        </tr>
        <tr class="l1">
            <td>Contract Technicians</td>
            <td>*</td>
            <td></td>
            <td>> 20</td>
            <td>*</td>
            <td>*</td>
            <td>*</td>
            <td>*</td>
            <td>*</td>
        </tr>

        <tr class="l2">
            <th colspan="10">Radtec Engineering, Inc.</th>
        </tr>
        <tr class="l1">
            <td>Administrative Staff</td>
            <td></td>
            <td>*</td>
            <td rowspan="4">4</td>
            <td>1</td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td>*</td>
        </tr>
        <tr class="l1">
            <td>Engineers</td>
            <td></td>
            <td>*</td>
            <td>2</td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td>*</td>
        </tr>
        <tr class="l1">
            <td>Technicians</td>
            <td>*</td>
            <td></td>
            <td>7</td>
            <td>*</td>
            <td>*</td>
            <td>*</td>
            <td>*</td>
            <td>*</td>
        </tr>
        <tr class="l1">
            <td>Contractors</td>
            <td>*</td>
            <td></td>
            <td>1</td>
            <td>*</td>
            <td>*</td>
            <td>*</td>
            <td>*</td>
            <td>*</td>
        </tr>
    </table>

My CSS has nothing saying to align center, only left yet the rows stay centered when I run it.

Here is my CSS:

 div.sqs-slice-group.copy.restrict-width-1000.text-align-center.align-center.align-center-absolute {
  top: 30px;
}

#main-navigation {
  word-spacing: 30px;
}

#footerBlocks {
  float: right; 
}

div.foo {
    float: right;       
}


table {
    width: 100%;
}

table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
}

th, td {
    padding: 5px;
    margin: 5px;
}

/* Heading, odd and even lines for table shading */
tr.s0 {
    background: #B2B2B2;
}
tr.s1 {
    background: #FFFFFF;
}
tr.s2 {
    background: #E6E6E6;
}

/* Leadership Tables */
tr.l0 {
    background: #B2B2B2;
    text-align: left;
}
tr.l1 {
    background: #FFFFFF;
    text-align: left;
}
tr.l2 {
    background: #E6E6E6;
    text-align: left;
}

Could it be that table heading tags are centered by default?

Answer 1

Could it be that table heading tags are centered by default?

Centering (horizontal and vertical) a <TH> element's content is part of the recommendation in the W3C's HTML 4.01 Specification section on tables:

Visual user agents typically render TH elements vertically and horizontally centered within the cell and with a bold font weight.

To left justify, just add the following to your CSS:

th {
    text-align: left;
}

You can also do the following:

<td style="text-align:left">

Answer 2

Have you tried

<td align="left>...</td>

in the HTML?

http://www.w3schools.com/tags/att_td_align.asp