Let's get started with a Web Table!
- Open Notepad++
- Choose:
File -> New
- Name the file:
table.html
- Change the
Save as type:
to:Hyper Text Markup Language file (*.html)
- Open your
index.html
file - Open your
styles.css
file - Copy the Table Page Template (HTML) code (below)
- Paste that code into your
table.html
file - Change your page title, your Author name, and your page heading to something appropriate
- Change the column names and the cell data for each row to have a table of songs, or sports, or animals or whatever you want.
- After the
<tbody>
tag:- Change the first
<tr>
tag
to:<tr class="oddRow">
- Change the second
<tr>
tag
to:<tr class="evenRow">
- Change the third
<tr>
tag
to:<tr class="oddRow">
- Change the first
- Copy the Table Page Template Styles (CSS) code (below)
- Paste that code into your
styles.css
file - Change the
background-color
, fontcolor
, andfont-family
(if you want) - In your index.html file
- Add a link to this page. Change:
<li>Create a Table Page</li>
to:<li><a href="table.html">Create a Table Page</a></li>
- Add a link to this page. Change:
- Click File -> Save
or CTRL-S
or click the floppy disk icon
to save your changes - Click: Run
- Choose: Launch in IE
or Launch in Chrome
or Launch in Firefox - View your web page
- Make any changes
- Save your changes
- Choose:
Table Page Template (HTML)
Tables should NEVER be used for page layout!
<!doctype html>
<html>
<head>
<title>page title goes here</title>
<!-- Author: put your name in this comment line -->
<link href="includes/styles.css" rel="stylesheet" />
</head>
<body>
<h1>page heading goes here</h1>
<table>
<thead>
<tr>
<th>Column 1 Name</th>
<th>Column 2 Name</th>
<th>Column 3 Name</th>
</tr>
</thead>
<tbody>
<tr>
<td>put data here</td>
<td>put data here</td>
<td>put data here</td>
</tr>
<tr>
<td>put data here</td>
<td>put data here</td>
<td>put data here</td>
</tr>
<tr>
<td>put data here</td>
<td>put data here</td>
<td>put data here</td>
</tr>
</tbody>
</table>
<p>This page was last modified on:
<script>document.write(document.lastModified);</script>.</p>
</body>
</html>
Table Page Template Styles (CSS)
table { font-family: Arial, Verdana, sans-serif; margin: 5% 15% auto; padding: 2%; width: 80%; } th { background-color: put-color-here; color: put-font-color-here; padding: 2%; } .evenRow { background-color: put-even-row-color-here; color: put-font-color-here; padding: 2%; } .oddRow { background-color: put-odd-row-color-here; color: put-font-color-here; padding: 2%; }