HTML Table Properties
Table Width Height Cellspacing Cellpadding

• HTML Basics

HTML Tutorial -
HTML Table Properties

The height and width for a table can be set with the attributes height and width. Height and width can be set for the table cells individually as well.

How to Set the Height and Width for a Table

<table width="300" height="200" border="1">
  <tr>
    <td>This is row 1/column1 with cell 1</td>
    <td>This is row 1/column2 with cell 2</td>
  </tr>
  <tr>
    <td>This is row 2/column1 with cell 3</td>
    <td>This is row 2/column2 with cell 4</td>
  </tr>
</table>

Here is what this table looks like in a browser window:

This is row 1/column1 with cell 1	This is row 1/column2 with cell 2
This is row 2/column1 with cell 3	This is row 2/column2 with cell 4

How to Set Cellspacing and Cellpadding in a Table

Now we are going to add cellspacing and cellpadding to the table in order to give the cells in the table and the text in the cells a little extra space.

What is Cellspacing?

Cellspacing is the space between the cells of a table.

What is Cellpadding?

Cellpadding is the space between the content of a cell and the border of the cell.

Now we are going to add cellspacing and cellpadding to the table example. The value for cellspacing (the space between the cells) is set to 10, and the value for cellpadding (the space between the cell's content and the border) is set to 15:

<table width="300" height="200" cellspacing="10" cellpadding="15" border="1">
  <tr>
    <td>This is row 1/column1 with cell 1</td>
    <td>This is row 1/column2 with cell 2</td>
  </tr>
  <tr>
    <td>This is row 2/column1 with cell 3</td>
    <td>This is row 2/column2 with cell 4</td>
  </tr>
</table>

And here is what this table with cellspacing and cellpadding looks like in a browser:

This is row 1/column1 with cell 1	This is row 1/column2 with cell 2
This is row 2/column1 with cell 3	This is row 2/column2 with cell 4

Now modify the values for cellspacing and cellpadding and look at the results in your browser so you get a feel for cellspacing and cellpadding.

• HTML Table and Table Properties Alignment
• HTML Background and Table Background
• HTML Table Borders
• HTML Table Properties

Or check out HTML Tutorial II for more HTML table design tips.

• HTML Tutorial II

• Back
• Next

---

HTML Related Links

• How to Get a Web Site or Online Business Started
• CMS - Content Management System
• How to Choose and Register the Right Domain Name
• Making Revenue - How to Make Money With a Website
• Server and Hosting

© This Article is Copyrighted by WebmasterSeminar.com

Please do not copy or reproduce this article in whole or part, in any form, without mentioning the source and including a live link back to WebmasterSeminar.com - Thank You!

LINK TO THIS TUTORIAL:

Copy the code below and paste into your web page

<a href="http://www.webmasterseminar.com/htmltableproperties.php">
Webmaster Seminar</a><br />
HTML Tables - Free Information, Tutorials and HTML Resources