HTML
  Home arrow HTML arrow HTML Tables
Dev Articles Forums 
ADO.NET  
Apache  
ASP  
ASP.NET  
C#  
C++  
ColdFusion  
COM/COM+  
Delphi-Kylix  
Design Usability  
Development Cycles  
DHTML  
Embedded Tools  
Flash  
Graphic Design  
HTML  
IIS  
Interviews  
Java  
JavaScript  
MySQL  
Oracle  
Photoshop  
PHP  
Reviews  
Ruby-on-Rails  
SQL  
SQL Server  
Style Sheets  
VB.Net  
Visual Basic  
Web Authoring  
Web Services  
Web Standards  
XML  
Moblin 
JMSL Numerical Library 
IBM® developerWorks 
Sun Developer Network 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us Get Paid 
Request Media Kit
Contact Us 
Site Map 
Privacy Policy 
Support 
 USERNAME
 
 PASSWORD
 
 
  >>> SIGN UP!  
  Lost Password? 
HTML

HTML Tables
By: James Payne
  • Search For More Articles!
  • Disclaimer
  • Author Terms
  • Rating: 5 stars5 stars5 stars5 stars5 stars / 1
    2008-01-30

    Table of Contents:
  • HTML Tables
  • Headings in Tables
  • Spanning More than One Row or Column
  • Using Tags Inside of Tables
  • Cellpadding and Cellspacing
  • Setting Backgrounds in Tables and Cells
  • Aligning Data within Your Cells

  • Rate this Article: Poor Best 
      ADD THIS ARTICLE TO:
      Del.ici.ous Digg
      Blink Simpy
      Google Spurl
      Y! MyWeb Furl
    Email Me Similar Content When Posted
    Add Developer Shed Article Feed To Your Site
    Email Article To Friend
    Print Version Of Article
    PDF Version Of Article
     
     
    ADVERTISEMENT


    HTML Tables


    (Page 1 of 7 )

    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.

    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

    More HTML Articles
    More By James Payne


       · Thanks for stopping by to read my article on HTML tables, where we discuss a...
     

    HTML ARTICLES

    - Completing Construction of a Database Form w...
    - Maximizing and Restoring Images in a Tabular...
    - Building the Recordset for an HTML Database ...
    - Laying Out a Database Form with HTML
    - Tabular Database Form Functions with HTML
    - Tabular Database Forms with HTML
    - Using the Find Functions for HTML Database F...
    - Sorting for Database Forms with HTML
    - Edit and Other Database Form Functions with ...
    - More Database Form Functions with HTML
    - Database Form Functions with HTML
    - Using the HTML Table Element as a Recordset
    - Building Single Row Database Forms with HTML
    - Introduction to Database Forms with HTML
    - Another Look at Animation of Geographical Ma...






    © 2003-2008 by Developer Shed. All rights reserved. DS Cluster 5 hosted by Hostway
    Stay green...Green IT