Web Designing Tutorials: Tables

Tables are defined with the <table> tag. A table is 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, tables, etc.

This Code	Would Display
<table> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr> </table>	row 1, cell 1 row 1, cell 2 row 2, cell 1 row 2, cell 2

Tables and the Border Attribute

To display a table with borders, you will use the border attribute.

This Code

Would Display

row 1, cell 1

row 1, cell 2

and....

This Code

Would Display

row 1, cell 1

row 1, cell 2

Open up your text editor. Type in your <html>, <head> and <body> tags. From here on I will only be writing what goes between the <body> tags. Type in the following:

<tr>

<td>Tables can be used to layout information</td>

</tr>

</table>

Save your page as mytable1.html and view it in your browser.

Headings in a Table

Headings in a table are defined with the <th> tag.

This code

Would Display

<table border="1"> <tr> <th>Heading</th> <th>Another Heading</th> </tr>

Heading	Another Heading
row 1, cell 1	row 1, cell 2
row 2, cell 1	row 2, cell 2

Cell Padding and Spacing

The <table> tag has two attributes known as cellspacing and cellpadding. Here is a table example without these properties. These properties may be used separately or together

This Code

Would Display

some text	some text
some text	some text

Table Tags

Tag	Description
<table>	Defines a table
<th>	Defines a table header
<tr>	Defines a table row
<td>	Defines a table cell
<caption>	Defines a table caption
<colgroup>	Defines groups of table columns
<col>	Defines the attribute values for one or more columns in a table

Web Designing Tutorials

Thursday, June 13, 2013

Tables

No comments:

Post a Comment