Lecture-8 : TABLES IN HTML

Tables are defined with the <table> tag.

Tables are divided into table rows with the <tr> tag.

Table rows are divided into table data with the <td> tag.

A table row can also be divided into table headings with the <th> tag.

The TR Element and its attributes


The TR element defines a single table row. The TR element can take the attributes ALIGN and VALIGN, which defines the horizontal alignment properties, can take the values “left”, “center” and “right”, while VALIGN, which defines the vertical alignment properties of the cells, can take the possible values “top”, “middle”, “bottom”. The default values are ALIGN=”left”, and VALIGN=”middle”.
TD and TH Alignment Attributes
The individual table cells, defined by the TD and TH elements, can also take the alignment attributes, to specify the alignment of the particular cell. This overrides the alignment specification given by TR. The values for TD cells are ALIGN=”left”, and VALIGN=”middle”, while the default values for TH are ALIGN=”center” and VALIGN=”middle”.

Here is the example of TR attributes, and TD and TH Override TR

<html>
<head>
<title>Inserting an Image in HTML</title>
</head>
<body>
<table>
</body>
</html>


Attributes of Table

Border :
If you want border layer in your table you can give it by border attribute in your table.

Tables Backgrounds


You can set table background using one of the following two ways:

bgcolor attribute - You can set background color for whole table or just for one cell.

Background attribute - You can set background image for whole table or just for one cell.

Caption attribute - The <caption> tag places a string of the text as title/caption for the table.


Now Lets see the example of tables :-

<html>
<head>
<title>Creating HTML tables</title>
</head>
<body>
<table width="500px" border="1">
<tr>
<th>Name</th>
<th>Age</th>
<th>Class</th>
</tr>
<tr>
<td>Vipul</td>
<td>15</td>
<td>10th</td>
</tr>
</table>
</body>
</html>


Output:-



Colspan and Rowspan Attributes :- You will use colspan attribute if you want to merge two or more columns into a single column. Similar way you will use rowspan if you want to merge two or more rows.
Cellpadding and Cellspacing Attributes :- By cellpadding and cellspacing which you can adjust the white space in your table cells. The cellspacing attribute defines the width of the border, while cellpadding represents the distance between cell borders and the content within a cell.

Example of Rowspan and Colspan :-

<html>
<head>
<title>HTML Table Colspan/Rowspan</title>
</head>
<body>
<table border="1" width="500px" cellpadding="5" cellpadding="7">
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr><td rowspan="2">Row 1 Cell 1</td><td>Row 1 Cell 2</td><td>Row 1 Cell 3</td></tr>
<tr><td>Row 2 Cell 2</td><td>Row 2 Cell 3</td></tr>
<tr><td colspan="3">Row 3 Cell 1</td></tr>
</table>
</body>
</html>


Output:-