Pages

Wednesday, July 7, 2010

:: HTML Elements Part 8 ::

HTML Tables

HTML Tables uses <table> tag.A table is divided into rows (with the <tr> tag), and each row is divided into data cells (with the <td> tag). td stands for "table data," and holds the content of a data cell. A <td&gt; tag can contain text, links, images, lists, forms, other tables, etc. Remember , you need to specify border attribute.If you do not specify a border attribute, the table will be displayed without borders. Sometimes this can be useful, but most of the time, we want the borders to show.

Below is the simple example of table with border.

<html>
<head>
<title> The eighth lesson </title>
</head>
<body>
<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>
</body>
</html>

You can also put header in the table. Header information in a table are defined with the <th> tag.The text in a th element will be bold and centered.

For example :

<html>
<head>
<title> The eighth lesson </title>
</head>
<body>
<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>
</body>
</html>

There are other attributes can be put together in table syntax.

Attribute
Description
cellpadding
Give tables a little extra space between the border of the cell and the text
cellspacing
Give tables a little extra space between the cells of a table
colspan
Merge two colums
rowspan Merge two rows

For example

<table border= "1" cellpadding="10">

In conclusion,the HTML Tables requires start and end tags.This syntax can be added in body section.

Forget to put end tags , will make your table not created.


0 comments: