HTML and CSS Reference
In-Depth Information
1.
th,
2.
td {
3.
padding-bottom: 22px;
4.
vertical-align: top;
5.
}
6.
th {
7.
padding-right: 45px;
8.
text-align: right;
9.
width: 20%;
10.
}
11.
td {
12.
width: 40%;
13.
}
9.
Next, let's style the table head and the elements within the table head. We'll set a
line-height
of
44
pixels on the
<thead>
element only, and a
color
of
#648880
and a
font-size
of
24
pixels on all
<th>
elements nested within a
<thead>
element. Our new styles include the following:
1.
thead {
2.
line-height: 44px;
3.
}
4.
thead th {
5.
color: #648880;
6.
font-size: 24px;
7.
}
10.
The table head is looking good, so let's also add some styles for the table body.
We'll begin with
<th>
elements nested within the
<tbody>
element: changing
their
color
, adding some
font
- and
text
-based styles, and adding some top
padding
.
1.
tbody th {
2.
color: #a9b2b9;
3.
font-size: 14px;
4.
font-weight: 400;
5.
padding-top: 22px;
6.
text-transform: uppercase;
7.
}
11.
We'll also add some styles to
<td>
elements nested within the
<tbody>
element,
beginning with a top
border
and
padding
. We'll style the
<td>
elements that
span only one column by adding
15
pixels of right
padding
to those that form
the left column and
15
pixels of left
padding
to those that form the right
Search WWH ::
Custom Search