Scribd
Upload
45 views

Hypertext Markup Language

HTML tables allow arranging data into rows and columns using <table>, <tr>, and <td> tags. Table headings can be defined using the <th> tag. Cellpadding and cellspacing attributes control whitespace within and between cells. The colspan and rowspan attributes merge cells across rows or columns.

Uploaded by

princy
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
45 views

Hypertext Markup Language

HTML tables allow arranging data into rows and columns using <table>, <tr>, and <td> tags. Table headings can be defined using the <th> tag. Cellpadding and cellspacing attributes control whitespace within and between cells. The colspan and rowspan attributes merge cells across rows or columns.

Uploaded by

princy
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 9

HTML

(Hypertext Markup Language)


HTML - Tables

• The HTML tables allow web authors to arrange data like text,
images, links, other tables, etc. into rows and columns of cells.

• The HTML tables are created using the <table> tag in which


the <tr> tag is used to create table rows and <td> tag is used to
create data cells. The elements under <td> are regular and left
aligned by default
Example

<html>
<head>
<title>HTML Tables</title>
</head>
<body>
<table border = "1">
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
</tr>
<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
</tr>
</table>
</body>
</html>
Table Heading

Table heading can be defined using <th> tag. This tag will be put


to replace <td> tag, which is used to represent actual data cell.
Normally you will put your top row as table heading, otherwise
you can use <th> element in any row. Headings, which are
defined in <th> tag are centered and bold by default.
<html> <head>
<title>HTML Table Header</title>
</head>
<body>
<table border = "1">
<tr>
<th>Name</th>

Example <th>Salary</th>
</tr>
<tr>
<td>Ramesh Raman</td>
<td>5000</td>
</tr>
<tr>
<td>Shabbir Hussein</td>
<td>7000</td>
</tr>
</table>
</body>
Cellpadding and Cellspacing Attributes

There are two attributes called cellpadding and cellspacing which


you will use to adjust the white space in your table cells. The
cellspacing attribute defines space between table cells, while
cellpadding represents the distance between cell borders and the
content within a cell.
<html> <head>
<title>HTML Table Cellpadding</title>
</head>
<body>
<table border = "1" cellpadding = "5" cellspacing = "5">
<tr>
<th>Name</th>
<th>Salary</th>

Example </tr>
<tr>
<td>Ramesh Raman</td>
<td>5000</td>
</tr>
<tr>
<td>Shabbir Hussein</td>
<td>7000</td>
</tr>
</table>
</body> </html>
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.


<html> <head> <title>HTML Table Colspan/Rowspan</title>
</head>
<body>
<table border = "1">
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>

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

You might also like