Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How do we display a table cell in HTML
In HTML, table cells are the individual containers that hold data within a table structure. The <td> element defines a standard data cell, while <th> defines header cells. Understanding how to properly display and format table cells is essential for creating organized, accessible data presentations.
Syntax
Following is the basic syntax for creating table cells −
<table>
<tr>
<th>Header Cell</th>
<th>Header Cell</th>
</tr>
<tr>
<td>Data Cell</td>
<td>Data Cell</td>
</tr>
</table>
Table Cell Elements
HTML provides two main elements for table cells −
<td>− Table Data cell, contains regular data content<th>− Table Header cell, contains header information and is bold by default
Basic Table Cell Display
Example
Following example demonstrates basic table cell creation with styling −
<!DOCTYPE html>
<html>
<head>
<title>Basic Table Cells</title>
<style>
table {
border-collapse: collapse;
width: 60%;
margin: 20px 0;
}
th, td {
border: 2px solid #3498db;
padding: 12px;
text-align: left;
}
th {
background-color: #3498db;
color: white;
font-weight: bold;
}
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<table>
<tr>
<th>NAME</th>
<th>COMPANY</th>
<th>POSITION</th>
</tr>
<tr>
<td>Varma</td>
<td>Google</td>
<td>Developer</td>
</tr>
<tr>
<td>Nikhil</td>
<td>Infosys</td>
<td>Analyst</td>
</tr>
</table>
</body>
</html>
The output displays a well-formatted table with header cells in blue and data cells with borders −
NAME COMPANY POSITION Varma Google Developer Nikhil Infosys Analyst
Important Table Cell Attributes
Modern HTML table cells support several key attributes for enhanced functionality −
| Attribute | Purpose | Example |
|---|---|---|
| colspan | Spans cell across multiple columns | <td colspan="2">Data</td> |
| rowspan | Spans cell across multiple rows | <td rowspan="3">Data</td> |
| headers | Associates cell with header cells | <td headers="h1 h2">Data</td> |
| scope | Defines header scope (col, row, colgroup, rowgroup) | <th scope="col">Header</th> |
Using Colspan and Rowspan
Example
Following example shows how to span cells across multiple columns and rows −
<!DOCTYPE html>
<html>
<head>
<title>Spanning Table Cells</title>
<style>
table {
border-collapse: collapse;
width: 70%;
margin: 20px 0;
}
th, td {
border: 2px solid #27ae60;
padding: 10px;
text-align: center;
}
th {
background-color: #27ae60;
color: white;
}
.highlight {
background-color: #ecf0f1;
font-weight: bold;
}
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<table>
<tr>
<th colspan="3">SALES REPORT</th>
</tr>
<tr>
<th>PRODUCT</th>
<th>Q1</th>
<th>Q2</th>
</tr>
<tr>
<td rowspan="2" class="highlight">Laptops</td>
<td>150</td>
<td>200</td>
</tr>
<tr>
<td colspan="2">Total: 350 units</td>
</tr>
</table>
</body>
</html>
The output shows a table with merged cells spanning multiple columns and rows −
SALES REPORT
PRODUCT Q1 Q2
Laptops 150 200
Total: 350 units
Using Scope Attribute
The scope attribute specifies which cells the header applies to, improving accessibility for screen readers. It is used only with <th> elements.
Example
Following example demonstrates proper use of the scope attribute −
<!DOCTYPE html>
<html>
<head>
<title>Table Scope Attribute</title>
<style>
table {
border-collapse: collapse;
font-family: Arial, sans-serif;
font-size: 14px;
width: 80%;
margin: 20px 0;
}
td, th {
border: 2px solid #2ecc71;
padding: 12px;
text-align: center;
}
th[scope="col"] {
background-color: #3498db;
color: white;
}
th[scope="row"] {
background-color: #e8f4fd;
font-weight: bold;
}
</style>
</head>
<body style="padding: 10px;">
<table>
<caption style="font-size: 18px; margin-bottom: 10px; font-weight: bold;">CRICKET PLAYERS AND TEAMS</caption>
<tr>
<th scope="col">PLAYERS</th>
<th scope="col">IPL TEAM</th>
<th scope="col">POSITION</th>
</tr>
<tr>
<th scope="row">MS DHONI</th>
<td>CSK</td>
<td>Wicket Keeper</td>
</tr>
<tr>
<th scope="row">RISHABH PANT</th>
<td>DELHI CAPITALS</td>
<td>Wicket Keeper</td>
</tr>
<tr>
<th scope="row">JOS BUTTLER</th>
<td>RAJASTHAN ROYALS</td>
<td>Batsman</td>
</tr>
</table>
</body>
</html>
The scope attribute creates a clear relationship between headers and data cells, with column headers in blue and row headers in light blue −
CRICKET PLAYERS AND TEAMS
PLAYERS IPL TEAM POSITION
MS DHONI CSK Wicket Keeper
RISHABH PANT DELHI CAPITALS Wicket Keeper
JOS BUTTLER RAJASTHAN ROYALS Batsman
Headers Attribute for Accessibility
The headers attribute explicitly associates data cells with their corresponding header cells using IDs. This is particularly useful for complex tables with multiple header levels.
Example
<!DOCTYPE html>
<html>
<head>
<title>Headers Attribute Example</title>
<style>
table {
border-collapse: collapse;
width: 70%;
margin: 20px 0;
}
th, td {
border: 1px solid #34495e;
padding: 10px;
text-align: center;
}
th {
background-color: #34495e;
color: white;
}
</style>
</head>
<body style 
754 Views
