Question

</section>


<section class="content-block" shows">
<h2 id "shows-title">Upcoming Shows</h2>
<table id "table" class="styled-table">
<tr>
<th>Date & Time</th>
<th>Venue</th>
<th>Notes</th>
</tr>
<tr>
<td>June 12, 8pm</td>
<td>Wednesday's</td>
<td>w/Distant Son</td>
</tr>
<tr>
<td>June 18, 9:30 pm</td>
<td>Club Sol</td>
<td rowspan="2">w/ Crazed Monarch</td>
</tr>
<tr>
<td>June 25, 9:30 pm</td>
<td>Elictrique</td>
</tr>
</table>
</section>



give this table borders in css
For the th element in the Upcoming Shows table, set the background-color property to black, and set the color property to light gray.

For the table cells, 8px of padding is about right.

Answer 1

Put this CSS in your page (inside <style> in the head or in your stylesheet). It targets your .styled-table and gives cell borders, 8px padding, and the requested header colors:

<style>
/* table base + collapse so cell borders join nicely */
.styled-table {
border-collapse: collapse;
border: 1px solid #444; /* outer border */
}

/* cells: padding and borders */
.styled-table th,
.styled-table td {
padding: 8px;
border: 1px solid #444; /* cell borders */
text-align: left;
}

/* header styling */
.styled-table th {
background-color: #000; /* black */
color: lightgray; /* light gray */
}
</style>

If you prefer to target the table by id use #table instead of .styled-table.