Home arrow HTML arrow HTML Tables
HTML

HTML Tables


In our last tutorial we discussed how to create different types of frames and position them on the page. We also covered the various types of lists we can create. And I even let you in on a little recipe in my plot to make you fatter than me. In this tutorial we will go over tables (you will need a place to put that dinner I told you how to make after all) and how to insert them into your web pages.

Author Info:
By: James Payne
Rating: 4 stars4 stars4 stars4 stars4 stars / 8
January 30, 2008
TABLE OF CONTENTS:
  1. · HTML Tables
  2. · Headings in Tables
  3. · Spanning More than One Row or Column
  4. · Using Tags Inside of Tables
  5. · Cellpadding and Cellspacing
  6. · Setting Backgrounds in Tables and Cells
  7. · Aligning Data within Your Cells

print this article
SEARCH DEVARTICLES

HTML Tables
(Page 1 of 7 )

Tables serve a wide variety of uses. First and foremost, they store data, and just about any type. You can store numbers, text, formulas, images, horizontal rules, forms, other tables, lists, and so forth. You can also use tables to help position your images on the page.

We create tables with the <table> tag and then use the <tr> tag to define our rows. To store the data in our table, we use the <td> tag, which stands for table data. Here is some code to create some basic tables:


<html>

<body>


<p>

This is how to create tables:

</p>


<h2>This is a one columned table:</h2>

<table border="1">

<tr>

<td>Look a table with data in it!</td>

</tr>

</table>


<h2>A one rowed table with many columns :</h2>

<table border="1">

<tr>

<td>Patrick Swayze</td>

<td>versus</td>

<td>Chuck Norris</td>

</tr>

</table>


<h2>This is a multiple rowed table with a bunch of columns:</h2>

<table border="1">

<tr>

<td><b>Hero</b></td>

<td><b>Super Power</b></td>

<td><b>Favorite Food</b></td>

</tr>

<tr>

<td>Chuck Norris</td>

<td>Hidden Beard Fist</td>

<td>Knuckle Sammiches</td>

</tr>

<tr>

<td>Bruce Lee</td>

<td>Nutcracker</td>

<td>Hurtz Donut</td>

</tr>

<tr>

<td>Patrick Swayze</td>

<td>Pelvic Thrust of Doom</td>

<td>Quiche</td>

</tr>

</table>


</body>

</html>

This will result in the following being displayed in the user's browser:

  This is how to create tables:

  This is a one columned table:

Look a table with data in it!

  A one rowed table with many columns :

Patrick Swayze

versus

Chuck Norris

  This is a multiple rowed table with a bunch of columns:

Hero

Super Power

Favorite Food

Chuck Norris

Hidden Beard Fist

Knuckle Sammiches

Bruce Lee

Nutcracker

Hurtz Donut

Patrick Swayze

Pelvic Thrust of Doom

Quiche

You may note that the tables above all come with borders. We define the way the border looks by using the <border> attribute. In the above example we specified that the border be equal to 1. This means that the border is 1 pixel in width (<table border="1">). If we were to goof around with that number, you can see that it could get pretty ridiculous.


<html>

<body>


<h2>How to create a table with a crazy border:</h2>

<table border="100">

<tr>

<td>Chuck</td>

<td>Norris</td>

</tr>

<tr>

<td>Bruce</td>

<td>Lee</td>

</tr>

</table>


</table>


</body>

</html>

This results in the following:


  How to create a table with a crazy border:

Chuck

Norris

Bruce

Lee

Depending upon your browser, this may or may not appear as a crazy table. It basically creates a table with a 100 pixel-width border.

Note that if you forget to set the border, or leave it out on purpose, you will create a borderless table. Here is how that appears:


<html>

<body>


<h2>How to create a table with no border:</h2>

<table>

<tr>

<td>Chuck</td>

<td>Norris</td>

</tr>

<tr>

<td>Bruce</td>

<td>Lee</td>

</tr>

</table>

</table>

</body>

</html>

And the result:


  How to create a table with no border:

Chuck

Norris

Bruce

Lee


blog comments powered by Disqus
HTML ARTICLES

- Does HTML5 Need a Main Element?
- Revisiting the HTML5 vs. Native Debate
- HTML5: Not for Phone Apps?
- HTML5 or Native?
- Job Hunting? Freelancer.com Lists This Quart...
- HTML5 in the News
- Report: HTML5 Mobile Performance Lags
- The Top HTML5 Audio Players
- Top HTML5 Video Tutorials
- HTML5: Reasons to Learn and Use It
- More of the Top Tutorials for HTML5 Forms
- MobileAppWizard Releases HTML5 App Builder
- HTML5 Boilerplate: Working with jQuery and M...
- HTML5 Boilerplate Introduction
- New API Platform for HTML5

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 

Developer Shed Affiliates

 




© 2003-2017 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials