Tables

About HTML Colors Images and Links Tables Lists Index Page

HOW TO MAKE A TABLE

Start and end with a table tag. <table></table>
<tr></tr>makes a row, everything in between the tr tag is one row
Each cell is coded for by a <td> and a </td> (stands for table data). You make the row and then specify the amount of cells in each row.
Within in the table tag, there is the border attribute. This creates the characteristic table lines.

<table border="60">

Another table attribute is the width attribute. This creates more horizontal space in each table cell. You can designate width in percents or pixels.
Cell padding is also an attribute. <table cellpadding="20"> It creates space around the content in the cell
Cell spacing puts space around each cell. The attribute is <table cellspacing="15">

Examples:
A plain table:

1	2
3	4
5	6

A table with border:

1	2
3	4
5	6

A table with border and width:

1	2
3	4
5	6

A table with border, width, and cellpadding.

1	2
3	4
5	6

A table with border, width, cellpadding, and cellspacing tags:

1	2
3	4
5	6

The code for this table looks like:
<table border="1" width="60" cellpadding="20" cellspacing="15">
<tr><td>1</td><td>2</td></tr>
<tr><td>3</td><td>4</td></tr>
<tr><td>5</td><td>6</td></tr>
</table>

More Attributes

The bg color attribute can be put within table tag. The bg color attribute changes the color of the entire table when place within the table tag. It can be placed in the row tag or in a singular cell. Examples are below.
In this table, the bgcolor tag is in the table tag.

A	B
C	D
E	F

In this table, a whole row is white.

A	B
C	D
E	F

In this table, one cell is white because the bgcolor attribute was placed within the cell tag <td>

A	B
C	D
E	F

When the bgcolor attribute is placed in the table tag and another bgcolor attribute is placed in a cell or row, the bgcolor attribute within the cell or row won't be overridden because they are more specific than the bgcolor in the table.

A	B
C	D
E	F

Merging Cells Horizontally and Vertically

You can't just delete cells. In order to merge cells there are two attributes: rowspan and colspan. When you want to create one cell in a particular row, use the colspan attribute. When you want to create one long vertical cell, use the rowspan attribute. Both attributes are placed within the cell tag <td colspan="3">

This table is an example of the colspan attribute because the cell spans three cells.

1
3	4	3
5	6	6

This table is an example of the rowspan attribute because the cell spans three cells. When using the rowspan attribute, row one (with the rowspan attribute) has one extra cell.

1	1	3
	3	4
	5	6

Background Images

To add a picture into the background of a table, use the background attribute. <table background="image.extension"> This attribute can also be applied to rows and cells as well.

1	7	9
3	4	3
5	6	6

Now a fun table!

My Colleges
Acceptances	Georgetown	Wash U	Santa Clara	Boston College	TCU
Waiting to Hear From	Brown	Northwestern	Boston University

Page Created By: Alice
March 24, 2010