|
Site Menu |
HTML
Learn all about HTML, how to format text, add images, create tables,
meta taga, and more!
.
|
JavaScript
Get the low down on JavaScript. See how to create popular JavaScript
applications like drop down menus, clocks, dynamic messages, popup
boxes, and more. |
| . |
CGI
Concise, easy to follow introdction to CGI and how to install CGI
scripts. |
| . |
Web Design
A miscellanous section that includes various web design tutorials |
|
|
|
|
123 Web
Design!
Creating
tables
Tables can get quite hairy to
create, but they are a very important part of HTML, and must be learnt
eventually. In this section, I'll cover the general syntax for
creating tables- complex tables are beyond the scope of this tutorial,
though.
All tables involve using the
below three tags:
| <table></table> |
Defines
a table. All tables begin and end with this tag. |
| <tr></tr> |
Defines
a row. A table must have at least one row (think about it). |
| <td></td> |
Defines
a cell within a row. All tables must also have a least one row. |
The best way to illustrate how
to create tables is to begin by showing the syntax involved in creating a
basic table:
<table>
<tr>
<td>A basic table</td>
</tr>
</table>
Take special note of the
structure of the tags- All tables begin with the <table> tag,
followed by at least one <tr> tag, and then by at least one
<td>.
Lets take the above a little
further and create a table with two cells (as opposed to just one):
<table
border=1>
<tr>
<td>This is the first cell</td>
<td>This is the second cell</td>
</tr>
</table>
| This is the first cell |
This is the second cell |
Want to try for a table with
two rows, and two cells in each of the row?
<table
border=1>
<tr>
<td>This is the first cell</td>
<td>This is the second cell</td>
</tr>
<tr>
<td>This is the third cell</td>
<td>This is the fourth cell</td>
</tr>
</table>
| This is the first cell |
This is the second cell |
| This is the third cell |
This is the fourth cell |
Since we wanted two rows, we
defined two <tr> tags. Since we wanted two cells in each of the row,
we defined two <td> tags inside each of the <tr>. Not that
bad, right?
-Table attributes
Before we get too carried away
with creating tables, its appropriate to first introduce the attributes
available in manipulating a table's appearance, such as border size,
background color, row/cell width etc. Below lists these important
attributes:
| width |
Available
to all of the table tags. Used to determine the tag's width,
either in px or % |
| border |
Available
to the <table> tag. Defines its border size |
| cellpadding |
Available
to the <table> tag. Defines the padding width between each
of it's cells. |
| cellspacing |
Available
to the <table> tag. Defines the spacing width between each
of it's cells. |
| bgcolor |
Available
to the <table> tag. Defines the background color of he
table |
| background |
Available
to the <table> tag. Specifies the background image of the
table. |
I encourage you to
individually try out all of these attributes; here's an example that uses
several of the attributes at once:
<table
border="2" width="136"
background="backgr15.jpg" cellspacing="0"
cellpadding="0">
<tr>
<td width="100%">Sample table<br>Sample
table></td>
</tr>
</table>
Sample table
Sample table |
|