Styling a table using css

HTML & CSS
1

Hey,

I found this styling on the web:


<!-- Table markup -->

<table>

	<!-- Table header -->

		<thead>
			<tr class="yellow">
				<th>Seizoen</th>
				<th>1 week</th>
				<th>midweek</th>
				<th>lang weekend</th>
				<th>kort weekend</th>
			</tr>
		</thead>

	<!-- Table body -->
		
		<tbody>
			<tr>
				<td>Hoogseizoen</td>
				<td>1372€</td>
				<td>950€</td>
				<td>750€</td>
				<td>500€</td>>
			</tr>
			<tr>  
                <td>Laagseizoen</td>  
				<td>1000€</td>
				<td>800€</td>
				<td>550€</td>
				<td>437€</td>
            </tr> 
		</tbody>
</table>



table {
	font: 11px/24px Verdana, Arial, Helvetica, sans-serif;
	border-collapse: collapse;
	width: 540px;
	}
	
th {
	padding: 0 0.5em;
	text-align: left;
	border-left: 1px solid #CCC;
	}
	
tr.yellow th{
	border-top: 1px solid #FB7A31;
	border-bottom: 1px solid #FB7A31;
	background: #FFC;
	}
	
td {
	border-bottom: 1px solid #CCC;
	padding: 0 0.5em;
	}
	
td:first-child {
	width: 120px;
	}
	
td+td {
	border-left: 1px solid #CCC;
	text-align: center;
	}

Now when i execute this code i get an “<” artifact at the top of the table. Anyone knows where this comes from ?

2

See Line 25: <td>500€</td>> and remove the extra ‘>’.

3

oh. thanks :blush:

4

No worries, a good tip is to use the W3C Validator first http://validator.w3.org/ if you cannot see a HTML markup syntax issue yourself.

I spotted it without having to use it, though it comes in useful; when ‘you cannot see the Wood for the trees’.

5

thanks!