Talan Web Portfolio

Activity 9: CSS Table Styling

This activity shows how CSS can improve the appearance of an HTML table.

<style>
.styled-table {
    width: 100%;
    border-collapse: collapse;
}

.styled-table th {
    background: #0f172a;
    color: white;
}

.styled-table th,
.styled-table td {
    border: 1px solid #94a3b8;
    padding: 12px;
}

.styled-table tr:nth-child(even) {
    background: #e2e8f0;
}

.styled-table tr:hover {
    background: #bfdbfe;
}
</style>

<table class="styled-table">
    <tr>
        <th>Name</th>
        <th>Course</th>
        <th>Year</th>
    </tr>
    <tr>
        <td>Mark</td>
        <td>BSIT</td>
        <td>3rd Year</td>
    </tr>
    <tr>
        <td>Herald</td>
        <td>BSIT</td>
        <td>3rd Year</td>
    </tr>
</table>