| Notebook | 11″ MacBook Air | 13″ MacBook Air | 15″ MacBook Pro |
|---|---|---|---|
| Processor | 1.8GHz dual-core Intel Core i7 | 1.8GHz dual-core Intel Core i7 | 2.5GHz quad-core Intel Core i7 |
| Screen | 11.6 inch LED | 13.3 inch LED | 15.4 inch LED |
| Memory | 2GB or 4GB | 4GB | 4GB or 8 GB |
Aha! That looks smart, doesn't it?
The Raw HTML for the table is exactly the same as that used in the previous page, so how come the table looks so much more attractive now?
Well, I've used Page Code Injection to place an embedded style sheet in the Head Area of this page. It looks like this:
<style type="text/css" media="screen">
#mytable {
width: 780px;
padding: 0;
margin: 0;
}
caption {
padding: 0 0 5px 0;
width: 780px;
font: italic 11px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
text-align: right;
}
th {
font: bold 11px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
color: #4f6b72;
border-right: 1px solid #C1DAD7;
border-bottom: 1px solid #C1DAD7;
border-top: 1px solid #C1DAD7;
letter-spacing: 2px;
text-transform: uppercase;
text-align: left;
padding: 6px 6px 6px 12px;
background: #CAE8EA;
}
th.nobg {
border-top: 0;
border-left: 0;
border-right: 1px solid #C1DAD7;
background: none;
}
td {
border-right: 1px solid #C1DAD7;
border-bottom: 1px solid #C1DAD7;
background: #fff;
padding: 6px 6px 6px 12px;
color: #4f6b72;
}
td.alt {
background: #F5FAFA;
color: #797268;
}
th.even {
border-left: 1px solid #C1DAD7;
border-top: 0;
background: #fff url(images/bullet1.gif) no-repeat;
font: bold 10px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
}
th.odd {
border-left: 1px solid #C1DAD7;
border-top: 0;
font: bold 10px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
color: #797268;
}
</style>
(Table design inspired by an article found in Veerle's Blog.)