HTML Table Notes

HTML Tables
Tables are very useful to arrange in HTML and they are used very frequently by almost all
web developers. Tables are just like spreadsheets and they are made up of rows and
columns.
You will create a table in HTML/XHTML by using <table> tag. Inside <table> element the
table is written out row by row. A row is contained inside a <tr> tag . which stands for
table row. And each cell is then written inside the row element using a <td> tag . which
stands for table data.
Example:
<html>
<head>
<title> Table </title>
</head>
<body>
<table border="1">
<tr>
<td>Row 1, Column 1</td>
</tr>
<tr>
</tr>
</table>
<body>
</html>
Output:
In the above example border is an attribute of <table> and it will put border across all the cells. If
you do not need a border then you call use border="0". The border attribute and other attributes
also mentioned in this session are deprecated and they have been replaced by CSS. So it is
recommended to use CSS instead of using any attribute directly.
Table Heading - The <th> Element:
Table heading can be defined using <th> element. This tag will be put to replace <td> tag
which is used to represent actual data. Normally you will put your top row as table
heading as shown below, otherwise you can use <th> element at any place:
<html>
<head>
</head>
<body>
<table border="1">
<tr>
<th>Name</th>
<th> Salary</th>
</tr>
<tr>
</tr>
<tr>
</tr>
</table>
<body>
</html>
Output: You can see its making heading as a bold one:

NOTE: Each cell must, however, have either a <td> or a <th> element in order for the
table to display correctly even if that element is empty.
Table Cellpadding and Cellspacing:
There are two attribiutes called cellpadding and cellspacing which you will use to adjust
the white space in your table cell. Cellspacing defines the width of the border, while
cellpadding represents the distance between cell borders and the content within.
Following is the example:
Cellspacing
<html>
<head>
</head>
<body>
<table border="2" cellspacing="50">
<tr>
<th>Name</th>
<th> Salary</th>
</tr>
<tr>
</tr>
<tr>
</tr>
</table>
<body>
</html>
Output:
Cellpadding
<html>
<head>
</head>
<body>
<table border="2" cellpadding="50">
<tr>
<th>Name</th>
<th> Salary</th>
</tr>
<tr>
</tr>
<tr>
</tr>
</table>
<body>
</html>
Output:
Colspan and Rowspan Attributes:
Colspan attribute is used to merge two or more columns into a single column. Similar way
you will use rowspan used to merge two or more row.
<html>
<head>
</head>
<body>
<table border="1">
<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:
Tables Backgrounds
Set table background using of the following two ways:
Using bgcolor attribute - You can set background color for whole table or just for one cell.
Using background attribute - You can set background image for whole table or just for
one cell.
You can set border color also using bordercolor attribute. Here is an example of using
bgcolor attribute:
Code:
<html>
<head>
</head>
<body>
<table border="5" bordercolor="red" bgcolor="gray">
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr><td>Row 1 Cell 1</td>
<td bgcolor="red">Row 1 Cell 2</td>
</table>
<body>
</html>
Output:
Code:
<html>
<head>
</head>
<body>
<table width="100%" border="5" bordercolor="red"
background="\C:\Users\preet\Desktop\OIP (2).jpg">
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr><td>Row 1 Cell 1</td>
<td bgcolor="red">Row 1 Cell 2</td>
</table>
<body>
</html>
Output:
Table Height and Width

Set a table width and height using width and height attributes. You can specify table
width or height in terms of pixels or in terms of percentage of available screen area.
Code:
< <html>
<head>
<title>HTML Table Width/Height</title>
</head>
<body>
<table border = "1" width = "50%" height = "40%">
<tr>
</tr>
<tr>
</tr>
</table>
</body>
</html>
Output:
Table Caption
The caption tag will serve as a title or explanation for the table and it shows up at the top
of the table.
Code:
<html>
<head>
</head>
<body>
<caption>This the table caption</caption>
<tr>
</tr>
<tr>
</tr>
</table>
</body>
</html>
Output:
Table Header, Body, and Footer
Tables can be divided into three portions − a header, a body, and a foot. The head and
foot are rather similar to headers and footers in a word-processed document that remain
the same for every page, while the body is the main content holder of the table.
The three elements for separating the head, body, and foot of a table are −
<thead> − to create a separate table header.
<tbody> − to indicate the main body of the table.
<tfoot> − to create a separate table footer.
Code:
<html>
<head>
</head>
<body>
<caption>This the table caption</caption>
<thead>
<tr>
<td colspan="2">Head of the table</td>
</tr>
</thead>
<tbody>
<tr>
</tr>
<tr>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2">Foot of the table</td>
</tr>
</tfoot>
</table>
</body>
</html>
Output:
References
1. Xavier, C, “ Web Technology and Design” , New Age International.

2. Ivan Bayross,” HTML, DHTML, Java Script, Perl & CGI”, BPB Publication.
3. Deitel, “Java for programmers”, Pearson Education.
4. Ramesh Bangia, “Internet and Web Design”, New Age International.
5. Jackson, “Web Technologies” Pearson Education.
6. Patel and Barik, ”Introduction to Web Technology & Internet”, Acme Learning

HTML Table Notes

Uploaded by

HTML Table Notes

Uploaded by

HTML Tables

Output: You can see its making heading as a bold one:

Table Cellpadding and Cellspacing:

<tr><td>Row 2 Cell 2</td><td>Row 2 Cell 3</td></tr>

<tr><td colspan="3">Row 3 Cell 1</td></tr>

Set table background using of the following two ways:

Table Height and Width

1. Xavier, C, “ Web Technology and Design” , New Age International.

You might also like