Header Cell 1	Header Cell 2	Header Cell 3
Row 1, Cell 1	Row 1, Cell 2	Row 1, Cell 3
Row 2, Cell 1	Row 2, Cell 2	Row 2, Cell 3
Row 3, Cell 1	Row 3, Cell 2	Row 3, Cell 3

HTML Tables

This page demonstrates how to create HTML tables. You can copy and paste the code into your own webpage or HTML document.

HTML tables are created using the HTML <table> tag. You combine this tag with other tags that define each row and column within your table.

Basic HTML Table

Here's an example of a basic HTML table:

Source Code

Result

<table border="1">
<tr>
<th>Table Header</th><th>Table Header</th>
</tr>
<tr>
<td>Table cell 1</td><td>Table cell 2</td>
</tr>
<tr>
<td>Table cell 3</td><td>Table cell 4</td>
</tr>
</table>

Table Header	Table Header
Table cell 1	Table cell 2
Table cell 3	Table cell 4

Adding Styles

You can use Cascading Style Sheets (CSS) to style your table so that it changes the look.

Source Code

Result

<!-- Start Styles. Move the 'style' tags and everything between them to between the 'head' tags -->
<style type="text/css">
.myTable { width:400px;background-color:#eee;border-collapse:collapse; }
.myTable th { background-color:#000;color:white;width:50%; }
.myTable td, .myTable th { padding:5px;border:1px solid #000; }
</style>
<!-- End Styles -->
<table class="myTable">
<tr>
<th>Table Header</th><th>Table Header</th>
</tr>
<tr>
<td>Table cell 1</td><td>Table cell 2</td>
</tr>
<tr>
<td>Table cell 3</td><td>Table cell 4</td>
</tr>
</table>

Table Header	Table Header
Table cell 1	Table cell 2
Table cell 3	Table cell 4

The code above uses the <table> tags to create the outer table. Then it uses the <tr> tags to define each table row. The <th> tags define the table header cells, and the <td> tags define each table data cell.

Note that the table header cells display the text slightly differently to the table data cells. This is because, the table headers are supposed to stand out.

This example uses Cascading Style Sheets (CSS) to determine how the table looks. This is everything between the opening and closing <style> tags. You can actually remove this code and the table will be a normal looking HTML table. Nothing wrong with that. Of course, you can also modify the CSS code to give your HTML tables a unique look and feel.

Same Table, Different Style

Below is an example of the same HTML table, but with a different set of styles. In other words, the HTML table has been coded using the exactly the same HTML code as the one in the above example. The only difference is that it references a different stylesheet (i.e. it uses class="myOtherTable" instead of class="myTable").

This demonstrates how changing the CSS part of the code can have a huge impact on how the HTML table is displayed in the browser.

Source Code

Result

<!-- Start Styles. Move the 'style' tags and everything between them to between the 'head' tags -->
<style type="text/css">
.myOtherTable { width:400px;background-color:#FFFFE0;border-collapse:collapse;color:#000;font-size:18px; }
.myOtherTable th { background-color:#BDB76B;color:white;width:50%;font-variant:small-caps; }
.myOtherTable td, .myOtherTable th { padding:5px;border:0; }
.myOtherTable td { font-family:Georgia, Garamond, serif; border-bottom:1px solid #BDB76B;height:180px; }
</style>
<!-- End Styles -->
<table class="myOtherTable">
<tr>
<th>Table Header</th><th>Table Header</th>
</tr>
<tr>
<td>Table cell 1</td><td>Table cell 2</td>
</tr>
<tr>
<td>Table cell 3</td><td>Table cell 4</td>
</tr>
</table>

Table Header	Table Header
Table cell 1	Table cell 2
Table cell 3	Table cell 4

Here's more table related stuff:

style="display:inline-block;width:728px;height:90px" data-ad-client="ca-pub-6331358926293806" data-ad-slot="2530133544">

What Our Members Are Saying...

"I joined Crusaders in 2009 and it was the best fitness decision I have ever made. The training is really well structured and the club caters for all abilities. I have made some great friendships along the way and the social events are fantastic. Highly recommend!"

"The training sessions are very well structured, coaches are professional and the sessions cater for all levels. I have met wonderful friends at the club and the social events are great! I highly recommend Crusaders."

"This is a fantastic welcoming running club for people of any level/ability. The facilities are amazing, the coaches expert and friendly and the atmosphere is supportive and encouraging. I’ve met the best people and improved my running significantly through joining Crusaders!"

"I found the coaches and the members to be very friendly and welcoming. There are many different groups and levels so there is always someone to train with, no matter what level you are."

Social

Membership

Training Times

About us

Training

fit 4 life

session booking

Crusaders AC Big Survey

Gallery

Testing page to get use to site

WelcometoSocial

Annual Events

gfdhdfhdfghd

Nights Out

First accordion

Enter Title 1

Enter Title 2

Enter Title 3

Enter Title 4

Enter Title 5

Second Accordion

Enter Title 1

Enter Title 2

Enter Title 3

Enter Title 4

Enter Title 5

First accordion

Enter Title 1

Enter Title 2

Enter Title 3

Enter Title 4

Enter Title 5

Second Accordion

Enter Title 1

Enter Title 2

Enter Title 3

Enter Title 4

Enter Title 5

HTML Tables

Basic HTML Table

Adding Styles

Same Table, Different Style

Thursday, October 25th

Friday, October 26th at 10pm

Saturday 27th, October

Tuesday, October 30th at 10pm

November 2012

December 2012

Friday 20th December 2013

Do Not Delete images below

Location

What Our Members Are Saying...

Welcome
to
Social