HTML:
<table>
<thead>
<tr>
<th class="from">From</th>
<th class="subject">Subject</th>
<th class="date">Date</th>
</tr>
</thead>
<tbody>
<tr>
<td>[from]</td>
<td>[subject]</td>
<td>[date]</td>
</tr>
</tbody>
</table>
CSS:
table {
width: 100%;
border: 1px solid #000;
}
th.from, th.date {
width: 15%
}
th.subject {
width: 70%; /* Not necessary, since only 70% width remains */
}
Найкраща практика полягає в тому, щоб тримати HTML та CSS окремо, щоб зменшити дублювання коду та розділити проблеми (HTML для структури та семантики та CSS для презентації).
Зауважте, що для роботи в старих версіях Internet Explorer, вам, можливо, доведеться надати вашій таблиці певну ширину (наприклад, 900 пікселів). У цьому браузері є деякі проблеми з рендеруванням елемента з розмірами відсотків, якщо його обгортка не має точних розмірів.