Table in HTML
What is a Table in HTML?
• An HTML table is used to display data in rows and columns, just like
a spreadsheet.
Table
Basic Table Tags
Tag Purpose
<table> Creates the table
<tr> Table row
<th> Table heading (bold & centered)
<td> Table data (cell)
<caption> Table title
<thead> Header section
<tbody> Body section
<tfoot> Footer section
Basic Table Example
•<html>
•<head>
•<title>HTML Table</title>
•</head>
•<body>
•</body>
•</html>
• <th>Name</th>
• <th>Course</th>
• <th>Marks</th>
• </tr>
• <tr>
• <td>Ravi</td>
• <td>BBA</td>
• <td>85</td>
• </tr>
• <tr>
• <td>Anita</td>
• <td>BCA</td>
• <td>90</td>
Table with Styling
• <style>
• table {
• border-collapse: collapse;
• width: 60%;
• }
• th, td {
• border: 1px solid black;
• padding: 10px;
• text-align: center;
• }
• th {
• background-color: lightgray;
• }
• </style>
Table with rowspan and colspan
• colspan="2" → merges two columns
• rowspan="2" → merges two rows
• rowspan attribute is used to merge cells vertically across multiple
rows, while
• colspan attribute is used to merge cells horizontally across multiple
columns in an HTML table.
HTML Table Colspan and Rowspan
• Rowspan and colspan are powerful HTML table attributes that let you
merge cells vertically and horizontally. They make complex table
structures cleaner, more flexible, and easier to understand.
• rowspan controls how many rows a cell spans vertically.
• colspan defines how many columns a cell spans horizontally.
• Widely used in complex tables, about 80–90% rely on them for better
layout and readability.
•
HTML Table with Colspan
HTML Table with colspan allows you to merge or combine
adjacent table cells horizontally, creating a single, wider cell that
spans across multiple columns.
Note: The colspan is defined as the <th> element.
Example: The element illustrates the HTML Table with colspan.
HTML Table with Rowspan
The HTML attribute rowspan determines how many rows a
specific cell in a table should cover. When a cell spans multiple
rows, it occupies the space of those rows within the table.
Example: The element illustrates a HTML Table with rowspan.
Table with Rowspan and Colspan Together
The table with rowspan and colspan together helps in creating
the table more complex and structured. The table utilizes
rowspan and colspan attributes to merge cells, creating a
structured layout.
Example: The element illustrates the HTML Table with colspan
and rowspan.
Practical-4-Design a table as follows:
Practical-5-Create A Table Using Cellpadding,
Cellspacing, Colspan And Rowspan Which Shows
The Prices Of Various Cars Of Different Brands.
Practical-6-Q. Create an HTML table to display employee
details with columns:
Employee ID, Name, Department, Salary.