Just playing around a little more....
The highlighted portion looks like someone was just marking the book so they could memorize their lines...
If you don't want to replicate the highlight, you could simplify the code like this:
Code:
<head>
<title></title>
<style>
table {margin:0 auto; width:70%; border-collapse:collapse;
background:url("../Images/paper.jpg") no-repeat;}
td {vertical-align:top; padding:5px; font-family:serif}
td:first-child {font-variant:small-caps; width:20%}
span.rt {display:block; text-align:right}
</style>
</head>
<body>
<table>
<tr><td>1st Citizen.</td><td>Sir, there's a hurry in the veins of youth<br/>That makes a vice of virtue by excess.</td></tr>
<tr><td>2d Citizen.</td><td>What if the coolness of our tardier veins<br/>Be loss of virtue?</td></tr>
<tr><td>1st Citizen.</td><td><span class="rt">All things cool with time—</span>The sun itself, they say, till heat shall find<br/>A general level, nowhere in excess.</td></tr>
<tr><td>2d Citizen.</td><td>'Tis a poor climax, to my weaker thought,<br/>That future middlingness.</td></tr>
</table>
</body>
This uses the ::first-child selector on the <td> to style the first column. Depending on how old the device is, it may not support that selector.
Also, Alex, you might want to look at
media queries if you want to use different css for different devices (small screens vs tablets, old devices vs new devices, etc).