html tables exercise

Tables are a useful feature in html. Here's an example ..

Game Type Cost Rating
Uncharted - Drakes Progress Action/Adventure £12 ****
       
       
       
       

Now, let's code one.

 

1. Open your text editor (TextEdit or NotePad).

 

 

2. Create and save 2 documents ..

tables-exercise.html
tables-exercise-styles.css

 

3. We are going to code a table. As you do so note the following tags ..

 

Now copy the following code to your "tables-exercise.html" document and re-save it ..

<html>
<head>
<title>Table test</title>
<link href="tables.css" rel="stylesheet" type="text/css" />
</head>

<body>
<table width="50%" border="1" cellspacing="0" cellpadding="4">
<tbody>
<tr>
<th width="25%" scope="col">Game title</th>
<th width="25%" scope="col">Game type</th>
<th width="25%" scope="col">Cost</th>
<th width="25%" scope="col">My rating</th>
</tr>
<tr>
<td>Uncharted - Drakes Progress</td>
<td>Action/adventure</td>
<td>&#163;12</td>
<td class="table-stars">*****</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</tbody>
</table>
</body>
</html>

 

4. Open "tables-exercise.html" into a browser to view the result. Note the following ..

 

 

5. Now we will add some CSS style/rules to "tables-exercise-styles.css".

Add the following styles to "tables-exercise-styles.css" and then re-save it ..

body {
font-family: "arial", sans-serif;
}

table {
font-size: 11px;
text-align: left;
background-color: #CCCCCC;
border-collapse: collapse;
}

table p {
font-size: 11px;
}

th {
color: #FFFFFF;
background-color: #333333;
font-size: 13px;
}

tr {
vertical-align: top;
}

table, th, td, tr {
border: 0px;
}

th, td {
padding: 10px;
}

.table-stars {
font-size: 20px;
}

 

 

6. Re-save "tables-exercise-styles.css", then re-load "tables-exercise.html" in your browser to see the styles take effect.

Note the following ..