|
|
| Home | Old Issues | Examples |
Welcome to Nathsite's weekly 'Around the Web in Eighty Kilobytes', a 20-part free guide to building a website of your own, and using the web well.
To stop getting ATWI80KB's, send an empty email to atwi80kb@homepage.com with 'NO MORE THINGIES' as the subject. To look at examples and previous ATWI80KB's, go to http://atwi80kb.homepage.com
AROUND THE WEB IN EIGHTY KILOBYTES 1.17 - 1.18
ATWI80KB 9
June 2, 2000
1) Making a Table
2) More on Tables
Example
1) MAKING A TABLE
The the main tags you'll need are <table>, lt;tr> and <td>.
<table> marks the beginning of the table.
<tr> starts a new row.
<td> starts a new cell.
All these tags have closing tags.
eg.
<table>
<tr>
<td>Row 1,<br>Column 1</td><td>Row 1,<br>Column 2</td>
</tr>
<tr>
<td>Row 2,<br>Column 1</td><td>Row 2,<br>Column 2</td>
</tr>
</table>
For column headings, <th> and </th> can be used instead of <td> and </td>. It makes text bold and centered. It isn't commonly used, though.
The <table> tag has a 'border' attribute, to control how thick the border is. With 'border=0', you can make tables invisible and use them to control what the page looks like.
<td> has 'colspan' and 'rowspan' attributes. 'colspan' controls how many columns the cell covers, and 'rowspan' controls the number of rows.
Eg 1.
<table><tr>
<td></td><td></td><td></td>
</tr>
<tr>
<td></td><td></td><td></td>
</tr></table>
Eg 2.
<table><tr>
<td colspan=2></td><td></td>
</tr>
<tr>
<td></td><td></td><td></td>
</tr></table>
Eg 3.
<table><tr>
<td rowspan=2></td><td></td><td></td>
</tr>
<tr>
<td></td><td></td>
</tr></table>
2) MORE ON TABLES
All the three table tags support 'bgcolor' attribute, which is used just like it is in the <body> tag.
Attributes of <td>:
'align' : It controls the horizontal alignment of cell contents. Values are 'center', 'left' or 'right'. Left is default.
'width' : It controls the width of the cell in pixels.
'valign' : Its value is either 'top', 'middle' or 'bottom'. 'middle' is default. 'valign' controls the vertical alignment of stuff in the cell.
Attributes of <table>:
'height' : Controls the height of the table in pixels.
'width' : Controls table width in:
- Pixels. eg. <table width=300>
- Percent. eg. <table width=50%>
'cellpadding' : Controls in pixels distance between cell contents and cell border.
'cellspacing' : Controls in pixels the distance between cells.
You can put pictures, applets or even other tables within a table.
EXAMPLE
<html>
<head>
<title>Harappan thing</title>
</head>
<body bgcolor="#FFFFFF" text="#0000CC" link="CC0000" alink="#FF0000" vlink="#AA0000">
<center>
<table border=0 width=600>
<tr>
<td bgcolor="#DDDDDD" width=290>
Look at how invisible tables can be used to control page layout!<br><br><br><br><br><br><br><br>
</td><td width=20><td bgcolor="#DDDDDD" rowspan=2>You can make columns with tables!</td>
</tr>
<tr><td colspan=2 bgcolor="#FFDDDD">Tables are the second-toughest bit of HTML!</td>
</table>
</center>
</body>
</html>
IMPORTANT: Last week, I said things between <pre> tags were plain text. This isn't true - only spaces and 'enter's are ignored.
Sorry.
Aniruddh Nath
Email questions to atwi80kb@homepage.com - I'll reply if I have time. I might write stuff from your email in later ATWI80KB's.
NOTE: I'm not responsible for any damage done to your computer because of this tutorial.