Tables

table tag

<table> tag is used to define table in an html document. Tables are created for displaying tabular information. Many people use tables for web designing purpose. What I mean to say is that few people use tables to adjust elements on a web page. Its really a bad practice. Use tables only to represent tabular information.

Here's the syntax for defining table:

<table>
    <tr>
        <th>row0, heading0</th>
        <th>row0, heading1</th>
    </tr>
    <tr>
        <td>row1, data1</td>
        <td>row1, data2</td>
    </tr>
    <tr>
        <td>row2, data1</td>
        <td>row2, data2</td>
    </tr>
</table>

tr tag

tr tag is used to add table rows.

th tag

th tag is used to define column heading for the table.

td tag

td tag is used to add table data. Its the actual content inside the table.
It is responsible for adding columns in the table.

There are few attributes that can be used while creating tables.

  • colspan

    colspan attribute is used to merge two or more columns.
    It is defined inside th or td tags.
    Syntax of using colspan tag:

    <th colspan="2">Heading text</th>

    Here value of colspan 2 indicates that two columns have been merged.

  • rowspan

    rowspan attribute is used to merge two or more rows.
    It is defined inside th or td tags.
    Syntax of using rowspan tag:

    <th rowspan="3">Heading text</th>

    Here value of rowspan 3 indicates that three rows have been merged.

  • border

    border attribute is used to specify whether to display border or not.
    Syntax for using border attribute:

    <table border="1">

Use tables wisely

First of all, I repeat that don't use tables for designing purpose. Use CSS instead. There is always more than one way to accomplish a task.

Also tables add to load time of a web page. It means the more tables on a web page, the more time the web page requires to load. So use tables wisely.

Things to do

  • Open notepad or notepad++.
  • Write the following code: 
    <!DOCTYPE html>
<html>
<head>
	<title>Tables</title>
</head>
<body>
<table border="2">
        <tr>
		<th>Column 1</th>
		<th>Column 2</th>
	</tr>
	<tr>
		<td>1</td>
		<td>2</td>
	</tr>
	<tr>
		<td rowspan="2">rowspan</td>
		<td>3</td>
	</tr>
	<tr>
		<td>4</td>
	</tr>
	<tr>
		<td colspan="2">colspan</td>
	</tr>
</table>
</body>
</html>
  • Save file as "table.htm" and open it in a browser.
  • Don't forget to do some experiment.
<< Adding Multimedia Forms >>