HTML Tables allow us to present data in an organized way using rows and columns. They provide a structured, visual format that enhances data clarity and comprehension, making them an essential part of web development.
Why Are Tables Used in HTML? #
HTML tables are primarily used to structure and present data effectively. They are especially helpful in the following situations:
- Data Structuring: Tables offer a coherent structure for organizing data, making it easier to interpret and understand.
- Comparative Presentation: When comparing data sets, tables enable side-by-side comparison.
- Tabular Data Representation: Tables are ideal for data that naturally fits into rows and columns, such as schedules, statistics, or pricing charts.
All About HTML Tables #
This section introduces HTML tables—from defining a basic table to creating nested tables. Tables are highly effective for displaying text, numeric, and non-numeric data. They are widely used in data representation, such as in databases.
Defining an HTML Table
An HTML table is created using the <table> tag. Within the table, rows are defined by the <tr> tag, table headers by the <th> tag, and table data cells by the <td> tag.
Example: The following example shows a simple HTML table listing products with their categories and prices.
<!DOCTYPE html>
<html>
<body>
<table border="1">
<tr>
<th>Product</th>
<th>Category</th>
<th>Price</th>
</tr>
<tr>
<td>Laptop</td>
<td>Electronics</td>
<td>$800</td>
</tr>
<tr>
<td>Bookshelf</td>
<td>Furniture</td>
<td>$150</td>
</tr>
<tr>
<td>Coffee Maker</td>
<td>Appliances</td>
<td>$50</td>
</tr>
</table>
</body>
</html>Styling HTML Tables #
To style HTML tables, CSS can be applied using internal or external styles. Basic CSS properties help improve the appearance of the table.
Example: Here’s an example of a styled HTML table with customized width, padding, and background color.
<!DOCTYPE html>
<html>
<head>
<style>
table {
width: 100%;
border-collapse: collapse;
margin-bottom: 20px;
}
th, td {
border: 1px solid #ddd;
padding: 8px;
text-align: left;
}
th {
background-color: #f2f2f2;
}
</style>
</head>
<body>
<h2>Styled HTML Table</h2>
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 4</td>
<td>Data 5</td>
<td>Data 6</td>
</tr>
</table>
</body>
</html>Table Background Color and Image #
Using CSS or HTML attributes, you can set background colors or images for tables. The HTML attributes bgcolor and background are still used occasionally to set these properties directly in the HTML.
Example 1: Setting a background color and border color using HTML attributes:
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Background Color</title>
</head>
<body>
<table border="1" bordercolor="green" bgcolor="yellow">
<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>Example 2: Using a background image in a table:
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Background Image</title>
</head>
<body>
<table border="1" bordercolor="green" background="/images/sample-image.png">
<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>Table Width and Height #
To specify the dimensions of a table, you can use the width and height attributes in terms of pixels or percentage.
Example: Here’s how you can set the table’s width and height:
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Width/Height</title>
</head>
<body>
<table border="1" width="400" height="150">
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<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>Nested HTML Tables #
HTML also allows the creation of tables within tables, known as nested tables.
Example: Creating a nested table:
<!DOCTYPE html>
<html>
<head>
<title>HTML Nested Tables</title>
</head>
<body>
<table border="1">
<tr>
<td>First Column of Outer Table</td>
<td>
<table border="1">
<tr>
<td>First row of Inner Table</td>
</tr>
<tr>
<td>Second row of Inner Table</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table border="1">
<tr>
<td>First row of Inner Table</td>
</tr>
<tr>
<td>Second row of Inner Table</td>
</tr>
</table>
</td>
<td>First Column of Outer Table</td>
</tr>
</table>
</body>
</html>HTML Table Tags Overview #
Below are some common HTML tags used in creating tables:
| Tag | Description |
|---|---|
<table> | Defines the table |
<th> | Defines a table header |
<tr> | Defines a row in the table |
<td> | Defines a cell in the table |
<caption> | Adds a caption to the table |
<colgroup> | Defines a group of columns for styling |
<thead> | Groups the header content in a table |
<tbody> | Groups the body content in a table |
<tfoot> | Groups the footer content in a table |
Want to learn HTML with an instructor, either offline or online? Find experienced tutors near you and join Coaching Wallah—completely free for students!
Leave your comment