logo
g Text Version
Auto
Beauty & Self
Books & Music
Career
Computers
Education
Family
Food & Wine
Health & Fitness
Hobbies & Crafts
Home & Garden
Money
News & Politics
Relationships
Religion & Spirituality
Society & Culture
Sports
Travel & Leisure
TV & Movies

dailyclick
Bored? Games!
Postcards
Astrology
Take a Quiz
Rate My Photo

new
Journals
Folklore and Mythology
Business Coach
Marriage
Senior Living
Ethnic Beauty
Adolescence


dailyclick
All times in EST

Full Schedule
g
g HTML Site
Elizabeth Connick
BellaOnline's HTML Editor

g

The HTML Table - 3
Guest Author - Diane Cipollo

New let's put into practice what we have discussed. Let's add a 500 pixel wide table to your Template5.html file. We want the table to have three rows, 1 box inside each row, a border of 1 pixel wide, and the contents inside the cells to be centered. After you have created the table, move the "Hello World" inside the top cell (row 1 - cell 1). Then move the font tags and the "Enter Here" into the cell in the second row (row 2 - cell 1). Finally leave row 3 - cell 1 empty. Open the Template5.html file into your text editor, add the following code and save the new file as Template6.html.

Table - source code
<table width="500" border="1">
<tr><td align="center">
Hello World
</td></tr>
<tr><td align="center">
<font face="Arial" size="5" color="#f76a03">Enter
Here</font>
</td></tr>
<tr><td align="center">

</td></tr>
</table>
Note--The arrow indicates that the code is wrapped to a second line and should really be all on one line.

Template6.html - source code
<html>
<head>
<title>Hello World</title>
<meta name="keywords" content="quilts,quilting,
quilt fabrics,quilt patterns,quilt batting,
quilting books,applique,picture quilts,quilt blocks">
<meta name="description" content="Quilting site for
quilters of all types. Resources for supplies, lessons,
information and help, friendship and discussion.">
</head>
<body>
<table width="500" border="1">
<tr><td align="center">
Hello World
</td></tr>
<tr><td align="center">
<font face="Arial" size="5" color="#f76a03">Enter
Here</font>
</td></tr>
<tr><td align="center">

</td></tr>
</table>
</body>
</html>
Note--The arrow indicates that the code is wrapped to a second line and should really be all on one line.

Now open Template6.html in your web browser and take a look at your new table. You might want to bookmark this tutorial. We will be creating many tables during the next several articles.You can continue to experiment with the table by adding, removing and changing the attribute/value pairs for each tag. When you are done put the code in Template6.html back to the above code and save it again.

← Back

|



RSS | Previous Features | Site Map

Add The+HTML+Table+%2D+3 to Twitter Add The+HTML+Table+%2D+3 to Facebook Add The+HTML+Table+%2D+3 to MySpace Add The+HTML+Table+%2D+3 to Del.icio.us Digg The+HTML+Table+%2D+3 Add The+HTML+Table+%2D+3 to Yahoo My Web Add The+HTML+Table+%2D+3 to Google Bookmarks Add The+HTML+Table+%2D+3 to Stumbleupon Add The+HTML+Table+%2D+3 to Reddit


Content copyright © 2009 by Diane Cipollo. All rights reserved.
This content was written by Diane Cipollo. If you wish to use this content in any manner, you need written permission. Contact Elizabeth Connick for details.

g


For FREE email updates, subscribe to the HTML Newsletter


Past Issues


print
Printer Friendly
bookmark
Bookmark
tell friend
Tell a Friend
forum
Forum
email
Email Editor

g features
What's Coming in HTML 5

What is FTP?

HTML Fundamentals - Tables

Archives | Site Map

forum
Forum
email
Contact

Past Issues
memberscenter

jobs
what
job title, keywords
where
city, state or zip
jobs by job search


vote
Growing a Garden
Veggies and Flowers
Veggies Only
Flowers Only
No Garden

g


| About BellaOnline | Privacy Policy | Advertising | Become an Editor |
Website copyright © 2009 Minerva WebWorks LLC. All rights reserved.


BellaOnline Editor