08- Tables

What are tables used for?

Web designers use tables for multiple purposes - positioning images and text on webpages (page layout),
displaying large arrays of data, creating rectangular boxes on the webpage, creating input forms, etc.


To create a table we need  three tags as follows:

<table>

The main tag. Used to tell the browser "this is a table", along with some attributes like size, border width and a few other things.

<tr>

Table Row defines a horizontal row of <td> (Table Data) cells

<td>

Specifies an individual block or cell in a table row.

Example of Tables:

Open Text Editor and type.

<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>

Save the file as table.html

Open file in browser(internet explorer, firefox )

Output

row 1, cell 1	row 1, cell 2
row 2, cell 1	row 2, cell 2

Border in Tables

To create a table we use border element with <table> tag.

<table border = "1">

Open Text Editor and type.

<table border="1">
<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>

Save the file as tableborder.html

Open file in browser(internet explorer, firefox )

Output

row 1, cell 1	row 1, cell 2
row 2, cell 1	row 2, cell 2

Table Header

We use headings in tables to highlight the row containts.
Use <th> or defining table header. For example

Save the file as Ordered.html

<table border="1">
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<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>

Save the file as Ordered.html

Open file in browser(internet explorer, firefox )

Output

Header 1	Header 2
row 1, cell 1	row 1, cell 2
row 2, cell 1	row 2, cell 2

powered by multimediagyan ©