TUTORIALS » HTML / JavaScript » HTML essentials (guided tutorials)

Tables in HTML

Page 6 of 6


Cell spacing

cellspacing is the attribute of a table that defines the distance between each cell of a table. The default value is 1.


Example:

<table cellspacing="20" border="1">
  <tr> <td>JOHN</td> <td>SANDY</td> </tr>
  <tr> <td>PETER</td> <td>MARY</td> </tr>
</table>

Will render:

cellspacing

Cell padding

cellpadding is the attribute of a table that defines the distance between the border of each cell and its contents. The default value is 1.

Example:

<table cellpadding="20" border="1">
  <tr> <td>JOHN</td> <td>SANDY</td> </tr>
  <tr> <td>PETER</td> <td>MARY</td> </tr>
</table>

Will render:

cellpadding


  1. Create a new XHTML document and write inside the body: 
    <table cellpadding="10" cellspacing="10" border="1">
  <tr> <td>1</td> <td>2</td> <td>3</td> </tr>
  <tr> <td>4</td> <td>5</td> <td>6</td> </tr>
  <tr> <td>7</td> <td>8</td> <td>9</td> </tr>
</table>
  2. Test your file in your browser.
  1. Play with different values in your cellpadding, cellspacing, and border attributes. Try using 0 (zero) values.
  2. Test your file in your browser after each change you make.


Congratulations! You just learned all the basics you need to create clean, good looking tables. Remember, you need to practice a lot if you really want to become a pro. I'll see you in the next tutorial.

More pages of this tutorial → Tables in HTML  <123456
Comments & Questions