Scribd
Upload
12 views2 pages

5

The document provides an HTML program that demonstrates the use of tables, including the <table>, <tr>, <th>, and <td> tags, along with attributes like border, rowspan, and colspan. It outlines an algorithm for setting up the HTML structure and includes a styled table example with header and data rows. The program showcases how to create a table with merged cells using colspan and rowspan attributes.

Uploaded by

devan.bharathi
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
12 views2 pages

5

The document provides an HTML program that demonstrates the use of tables, including the <table>, <tr>, <th>, and <td> tags, along with attributes like border, rowspan, and colspan. It outlines an algorithm for setting up the HTML structure and includes a styled table example with header and data rows. The program showcases how to create a table with merged cells using colspan and rowspan attributes.

Uploaded by

devan.bharathi
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 2

a. Write a HTML program, to explain the working of tables.

(use tags: <table>, <tr>, <th>, <td> and


attributes: border, rowspan, colspan).
ALGORITHM :
1. Start
2. Set up HTML document with <!DOCTYPE html>, <html lang="en">, <head>, and metadata.
3. Inside <head>, add:

 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Table Example</title>
 <style> section with table CSS classes

4. Inside <body>:
Add <h1> with text "Table Example"
Add <p> with explanation text
5. Create table with <table border="1"> and:

o Header row with <th> tags


o Data rows with <td> tags, including colspan and rowspan attributes

6. Close <table>, <body>, and <html> tags


7. End the program.

PROGRAM :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Table Example</title>
<style>
table {
border-collapse: collapse;
width: 100%;
}
th, td {
border: 1px solid black;
padding: 8px;
text-align: center;
}
th {
background-color: #f2f2f2;
}
</style>
</head>
<body>
<h1>Table Example</h1>
<p>This table demonstrates the use of various tags and attributes.</p>
<table border="1">
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
<tr>
<td>Row 1, Cell 1</td>
<td colspan="2">Row 1, Cell 2 and 3 (colspan=2)</td>
</tr>
<tr>
<td rowspan="2">Row 2 and 3, Cell 1 (rowspan=2)</td>
<td>Row 2, Cell 2</td>
<td>Row 2, Cell 3</td>
</tr>
<tr>
<td>Row 3, Cell 2</td>
<td>Row 3, Cell 3</td>
</tr>
<tr>
<td>Row 4, Cell 1</td>
<td>Row 4, Cell 2</td>
<td>Row 4, Cell 3</td>
</tr>
</table>
</body>
</html>

You might also like