I am working on Build Your Own Website Chapter 6 and for some reason, the first data row of my table is showing gray like the caption row. I have checked my code against the book’s markup several times and can’t find the error. Here is my code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Forthcoming diving events and trips with BubbleUnder</title>
<meta charset="utf-8"/>
<link href="style1.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div id="header">
<div id="sitebranding">
<h1>BubbleUnder.com</h1>
</div>
<div id="tagline">
<p>Diving club for the south-west UK - let's make
a splash!</p>
</div>
</div>
<div id="navigation">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About Us</a></li>
<li><a href="events.html"/>Club Events</a></li>
<li><a href="contact.html">Contact Us</a></li>
<li><a href="gallery.html">Image Gallery</a></li>
</div>
</ul>
<div id="bodycontent">
<h2>Forthcoming club events</h2>
<p>BubbleUnder members love meeting up for dive trips around the country. Below
are all the dive trips that we currently have planned. For more information
about any of them, please get in contact with that event's organizer.</p>
<table>
<tr>
<th>Name</th>
<th>Contact (Home)</th>
<th>Contact (Work)</th>
<th>Location</th>
</tr>
<tr>
<td>Jane Bradley</td>
<td>02380 123123</td>
<td>02380 577566</td>
<td>Southampton</td>
</tr>
<tr>
<td>Fred Bradley</td>
<td>01273 177166</td>
<td>01273 916376</td>
<td>Brighton</td>
</tr>
<tr>
<td>Lionel Rundel</td>
<td>01793 641207</td>
<td>01793 626696</td>
<td>Swindon</td>
</tr>
</table>
<table class="events" summary="Details of upcoming events and
dive trips">
<caption>Club events - dive trips for the next six months</caption>
<tr>
<th>Date</th>
<th>Event Description</th>
<th>Approximate Cost</th>
<th>Contact</th>
</tr>
<tbody>
<tr>
<th>12 July</th>
<th>Committee meeting, deciding on next year's trips</th>
<th>N/A</th>
<th>Bob Dobalina</th>
</tr>
<tr>
<td>19 July</td>
<td>7-day trip to Hurghada (package deal) - limited spaces</td>
<td>£260pp (all-inclusive), departing Luton</td>
<td>Bob Dobalina</td>
</tr>
<tr>
<td>5 August</td>
<td>Ocean & Sports Diver Theory Course</td>
<td>Call for details</td>
<td>Jeff Edgely</td>
</tr>
<tr>
<td>12 August</td>
<td>Murder Mystery Weekend, Cotswolds (no diving!)</td>
<td>£65pp (accommodation included)</td>
<td>Jill Smith</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Hi @therealramona. We’ll need to see the CSS which goes with that, to know what’s going wrong with the styling.
To post code here, you can either highlight the code and use the </> button on the edit box to format it, or type three backticks
```
on a line above your code, and three on a line below it. I find this method easier. (The backtick is left of the 1 on my UK keyboard; unfortunately, some European keyboards don’t have that key at all.)
Edit: It appears that copying and pasting my three above doesn’t work, because the formatting is inserting spaces. They need to be typed direct.
