1+4 x 5 Basic table

Basic table with a header, 5 columns, and 4 data rows

by ShoeMaker

HTML

<table class="DynaTable">
    <tr class="DynaTableHead">
        <th class="DynaTableHeadCell-1">col 1</th>
        <th class="DynaTableHeadCell-2">col 2</th>
        <th class="DynaTableHeadCell-3">col 3</th>
        <th class="DynaTableHeadCell-4">col 4</th>
        <th class="DynaTableHeadCell-5">col 5</th>
    </tr>
    <tr class="DynaTableRow">
        <td class="DynaTableRowCell-1">cell 1-1</td>
        <td class="DynaTableRowCell-2">cell 1-2</td>
        <td class="DynaTableRowCell-3">cell 1-3</td>
        <td class="DynaTableRowCell-4">cell 1-4</td>
        <td class="DynaTableRowCell-5">cell 1-5</td>
    </tr>
    <tr class="DynaTableRow">
        <td class="DynaTableRowCell-1">cell 2-1</td>
        <td class="DynaTableRowCell-2">cell 2-2</td>
        <td class="DynaTableRowCell-3">cell 2-3</td>
        <td class="DynaTableRowCell-4">cell 2-4</td>
        <td class="DynaTableRowCell-5">cell 2-5</td>
    </tr>
    <tr class="DynaTableRow">
        <td class="DynaTableRowCell-1">cell 3-1</td>
        <td class="DynaTableRowCell-2">cell 3-2</td>
        <td class="DynaTableRowCell-3">cell 3-3</td>
        <td class="DynaTableRowCell-4">cell 3-4</td>
        <td class="DynaTableRowCell-5">cell 3-5</td>
    </tr>
    <tr class="DynaTableRow">
        <td class="DynaTableRowCell-1">cell 4-1</td>
        <td class="DynaTableRowCell-2">cell 4-2</td>
        <td class="DynaTableRowCell-3">cell 4-3</td>
        <td class="DynaTableRowCell-4">cell 4-4</td>
        <td class="DynaTableRowCell-5">cell 4-5</td>
    </tr>
</table>

CSS

table, th, td {
    border: 1px solid #000;
    border-collapse: collapse;
}
.DynaTable {
    width: 300px;
}
tr.DynaTableHead {
    background-color: #AAA;
}
tr.DynaTableRow {
    text-align: center;
}