HTML MADE EASY Web Design for Beginners

ComboInk Free Shipping for Order over $50

Namecheap.com - Cheap domain name registration, renewal and transfers - Free SSL Certificates - Web Hosting

Lesson 8: Tables

Making A Table
We’re talking here tables for holding data not the dinner table. Tables are useful in laying out the design of web pages so it’s well worth the time to learn how to make them. A table starts and ends with the table tag:

<table></table>

Between the opening and closing table tags go a couple of other tags, the tr tag:

<tr></tr>

It stands for “table row” and will make up one row across the table. Between the tr tags are found the td tags:

<td></td>

The td stands for “table data” it forms one box called a “cell” which contains content seen on the web page such as text or graphics. Here’s how the table code is put together:

<table border="1">

<tr>
<td>
Beagle</td>
<td>
Chihuahua</td>
</tr>

<tr>
<td>
Terrier</td>
<td>
Collie</td>
</tr>

</table>

Putting a border attribute in the table tag will help you see how the table and cells are formed, setting the border attribute to "0" will remove the borders altogether.

Take a close look at the code, this table will have 2 rows with 2 cells in each row. The stuff between the opening and closing td tags is what will be in each cell. Note that each row is finished off with the closing tr tag. Finally the table is finished by ending it with the closing table tag.

Result:

Beagle Chihuahua
Terrier Collie

Remember the style attribute from lesson 4? Put it into the opening td tags with a CSS padding command to add some space around the content of the cells:

<td style="padding:10px;">Beagle</td>

Result:

Beagle Chihuahua
Terrier Collie

We can make a table larger by putting the style attribute into the opening table tag and giving it a CSS width command:

<table border="1" style="width:300px;">

Result:

Beagle Chihuahua
Terrier Collie

Add the a CSS vertical-align command to a td tag and the content of that cell will start at the top of the cell:

<td style="vertical-align:top;">Chihuahua</td>

Result:

Beagle Chihuahua
Terrier Collie

Let's change the color of a cell with CSS background command:

<td style="background:silver;">Terrier</td>

Result:

Beagle Chihuahua
Terrier Collie

And that folks is how a table is put together. By now you have all the tags you need to put together a website, I hope you enjoyed the lessons enough to buy my book, HTML Made Easy with a free bonus CSS tutorial.

Once your website is ready for its debut on the world wide web, you will want to know how to put it on the internet, learn how it is done in the Uploading Web Pages tutorial.

Earn Money With Your Website!
Looking for a way to make money from your website? Do what thousands of sites are doing and join an affiliate program. It's free so you have nothing to lose. Get Started!

Namecheap.com - The hassle-free way to buy domains and hosting online

© 2017 HTML Made Easy | Privacy Statement