Table Zebra Rows

Name:	Country:	Hobbies:
Ardan	Australia	bike riding, reading
Peter	Australia	reading, blogging
John	England	soccer, boxing
Tracey	South Africa	soccer, blogging

Code with comments

This can be copied and pasted into the Edit HTML

<table>
<tr>
<th>Name:</th><!-- th:table head -->
<th>Country:</th>
<th>Hobbies:</th>
</tr>
<tr class="bg"><!-- I have given every other row a class so as to style them different-->
<td>Ardan</td>
<td>Australia</td>
<td>bike riding, reading</td>
</tr>
<tr>
<td>Peter</td>
<td>Australia</td>
<td>reading, blogging</td>
</tr>
<tr class="bg">
<td>John</td>
<td>England</td>
<td>soccer, boxing</td>
</tr>
<tr>
<td>Tracey</td>
<td>South Africa</td>
<td>soccer, blogging</td>
</tr>
</table>
<h4>Code with comments</h4>
<style>
table{width:500px;/* width can be changed but limited by page width or working area*/
border:1px solid grey;}/* change #of pixels to what you want, borders can be solid,dashed or dotted, colors can be changed  */
td{border:1px solid grey;
padding: .5em 1em .5em 1em;}
th{border:1px solid grey;
padding: .5em 1em .5em 1em;
background-color: lightgrey;}
.bg{background-color: pink;/* .bg identifies it as the class bg */
color: red}
</style>

Letter Spacing

Tight Spacing

Loose Spacing

Below is the code used to achieve this, I hope it helps.

<h2 id ="tight">
Tight Spacing</h2>
<h2 id ="loose">
Loose Spacing</h2>

<style>
#tight{letter-spacing:-2px;}
#loose{letter-spacing:10px;}
</style>