Table styling issue

HTML & CSS
1

I have multiple tables. I want text alignment of first to be on left, rest that follow to be centered. Not sure what I’m missing. Any help appreciated.

My html:

<table class="fullprice">
  <caption>
    Session Rates
  </caption>
  <colgroup>
  <col id="length">
  <col id="rate">
  </colgroup>

  <tr>
    <th scope="col">Length</th>
    <th scope="col">Rate</th>
  </tr>
  <tr>
    <td><sup>1</sup>/<sub>2</sub> hour</td>
    <td>$40</td>
  </tr>
  <tr>
    <td>1 hour</td>
    <td>$70</td>
  </tr>
  <tr>
    <td>1 <sup>1</sup>/<sub>2</sub> hour</td>
    <td>$105</td>
  </tr>
  <tr>
    <td>2 hour</td>
    <td>$130</td>
  </tr>
  <tr>
  	<td>1 <sup>1</sup>/<sub>4</sub> hour Hot Stones</td>
    <td>$90</td>
</table>
<table class="packages">
	<caption>
		1 hour packages
    </caption>
    <colgroup>
    <col id= "quantity">
    <col id= "rate">
    <col id= "no_discount">
    <col id="save">
    <col id= "each">
    </colgroup>

    <tr>
    	<th scope= "col">Quantity</th>
        <th scope= "col">Rate</th>
        <th scope= "col">Without Discount</th>
        <th scope= "col">Saves</th>
        <th scope="col">Cost Each</th>
    </tr>
    <tr>
    	<td>3</td>
        <td>$180</td>
        <td>$210</td>
        <td>$30</td>
        <td>$60</td>
    </tr>
    <tr>
    	<td>5</td>
        <td>$275</td>
        <td>$350</td>
        <td>$75</td>
        <td>$55</td>
    </tr>
        <tr>
    	<td>10</td>
        <td>$520</td>
        <td>$700</td>
        <td>$180</td>
        <td>$52</td>
    </tr>
    </table>

And CSS:


table {
	width:65%;
	margin: 0 auto;
	padding-top: 5em;
	border-collapse: collapse;
	margin-top: 5em;
}


th {
	padding: .6em 1em .3em;
	text-align: center;
	border-bottom: 1px solid black;
}
th, td {
	vertical-align: middle;	
}
td {
	padding: .4em 1em;
	border-bottom: 1px solid #900;
}
tr:hover {
	color: #005BAA;
}
table.fullprice {
	width: 35%;
}
td.fullprice {
	text-align: left;
}
td.packages {
	text-align: center;
}

What am I missing??

2

The following change to your css will center the text in table.packages.

from:


td.fullprice {
	text-align: left;
}
td.packages {
	text-align: center;
}

to:


.fullprice td {
	text-align: left;
}
.packages td {
	text-align: center;
}
3

Thanks, that did it. But any explanation of why? What is difference between td.packages and .packages td ? Is it a matter of syntax? Or specificity? Thoughts that might help me in the future??

4

Let’s look at your HTML and we see
<table class=“fullprice”> and later <table class=“packages”>

The tables have been given the classes “fullprice” and “packages”.

The <td> tags within these tables do not have classes assigned.

.fullprice td {} targets the td tag within the selector whose class is .fullprice.

td.fullprice {} targets a td tag with a class of .fullprice (which does not exist in your HTML).

5

Thanks. It’s a matter of me understanding the selectors. Thanks so much to you and everyone that helps me in my journey through web design learning.

6

You are very welcome. Enjoy the journey :slight_smile: