Tables are a way of organizing your information. You have a large amount of control in creating Tables, as they are actually quite flexible; you can vary the width to take up the whole page (no matter how wide the user makes it). Or you can make them quite strict and force the page into a certain shape.

Basic Table

The most basic table would probably be two adjacent cells in one row.  However, a table generally has at least two rows and two columns as shown here:

However, you can also begin removing lines to form specific types of tables as shown here:

Note: either your row or your column must extend through the entire table. 

So, how do you make one?  Let’s begin!

There are three basic elements in any table: the table, the table row, and the table cell.  Tables are defined with the <table> tag.  They are then divided into rows (with the <tr> tag), and each row is divided into data cells (with the <td> tag). The letters td stands for "table data," which is the content of a data cell.  A data cell can contain text, images, lists, paragraphs, forms, horizontal rules, even other tables, etc.

Table Border

It is possible to form a Table without a visible border. If you do not specify a border attribute, the table will be displayed without any borders.  The coding and display for the same table that we created above (but without a border?) Is shown here:

While you can still see the border, it is possible to remove it completely by making the border the same color as the background, like this:

Table Headings

To add a heading to the entire table or to each column, you will use the <TH> tag. This will be used in place of a <TD> tag in a table Row as shown below:

Empty Cells

If you would like to leave one of the cells empty, you will need to include a non-breaking space (&nbsp;) inside of the cell.  If you do not include this space, most browsers will remove the border around the empty cell, making your table look rather odd.

Cells That Span Multiple Rows and/or Columns

As noted above, it is possible to create cells that will be in one row spanning the width of two or more cells in the other rows and/or spanning the height of two or more cells in other columns. To span multiple columns, use the <colspan> command inside of a <TD> or <TH> tag. In this tag, you will also need to denote how many columns you are spanning.  To span multiple rows, use the <rowspan> command inside of a <TD> or <TH> tag. In this tag, you will also need to denote how many rows you are spanning. This is shown below:

If you have additional questions, click HERE to proceed to the FAQs Page .
or
Click HERE to proceed to the HTML Page Assignment.

 

Notes