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 to use an HTML tag inside HTML table?
HTML allows you to place any valid HTML tag inside table cells, making tables highly flexible for displaying structured content. The HTML tags should be placed inside <td> (table data) or <th> (table header) elements to create rich, formatted content within your tables.
Syntax
Following is the syntax to use HTML tags inside table cells −
<td> <tag>Content</tag> </td>
You can include paragraphs, lists, images, links, forms, or any other HTML element inside table cells. The nested tags follow the same rules as regular HTML elements.
Using Paragraph Tags in Tables
The most common use case is embedding <p> tags inside table cells for better text formatting and spacing.
Example
Following example shows how to use paragraph tags inside table cells −
<!DOCTYPE html>
<html>
<head>
<title>Paragraph Tags in Tables</title>
<style>
table, tr, th, td {
border: 1px solid black;
border-collapse: collapse;
}
table {
width: 60%;
margin: 10px;
}
th, td {
padding: 10px;
text-align: left;
}
</style>
</head>
<body style="font-family: Arial, sans-serif;">
<table>
<caption style="text-align: center; font-weight: bold; margin-bottom: 10px;">Employees</caption>
<tr>
<th>Employee Name</th>
<th>About Employee</th>
</tr>
<tr>
<td>Yadav</td>
<td><p>Lokesh Yadav is a content developer at TutorialsPoint.</p></td>
</tr>
<tr>
<td>Abdul</td>
<td><p>Abdul is a content developer at TutorialsPoint.</p></td>
</tr>
</table>
</body>
</html>
The output displays a table with paragraph-formatted text in the second column −
Employees ?????????????????????????????????????????????????????????????????? ? Employee Name? About Employee ? ?????????????????????????????????????????????????????????????????? ? Yadav ? Lokesh Yadav is a content developer at ? ? ? TutorialsPoint. ? ?????????????????????????????????????????????????????????????????? ? Abdul ? Abdul is a content developer at TutorialsPoint. ? ??????????????????????????????????????????????????????????????????
Using List Tags in Tables
Lists (<ul>, <ol>) are commonly used inside table cells to display multiple items in an organized format.
Example
Following example demonstrates using unordered lists inside table cells −
<!DOCTYPE html>
<html>
<head>
<title>Lists in Tables</title>
<style>
table, tr, th, td {
border: 1px solid black;
border-collapse: collapse;
}
table {
width: 50%;
margin: 10px;
}
th, td {
padding: 10px;
text-align: left;
}
</style>
</head>
<body style="font-family: Arial, sans-serif;">
<table>
<caption style="text-align: center; font-weight: bold; margin-bottom: 10px;">Employee Skills</caption>
<tr>
<th>Employee Name</th>
<th>Languages Known</th>
</tr>
<tr>
<td>Yadav</td>
<td>
<ul>
<li>HTML</li>
<li>Java</li>
<li>C</li>
</ul>
</td>
</tr>
<tr>
<td>Abdul</td>
<td>
<ul>
<li>C#</li>
<li>Java</li>
<li>C</li>
</ul>
</td>
</tr>
</table>
</body>
</html>
The output shows a table with bulleted lists in the second column −
Employee Skills ?????????????????????????????????? ? Employee Name? Languages Known ? ?????????????????????????????????? ? Yadav ? ? HTML ? ? ? ? Java ? ? ? ? C ? ?????????????????????????????????? ? Abdul ? ? C# ? ? ? ? Java ? ? ? ? C ? ??????????????????????????????????
Using Multiple HTML Tags in Tables
You can combine different HTML elements within table cells to create complex layouts. This is particularly useful for displaying detailed information in a structured format.
Example
Following example shows how to use multiple HTML tags within table cells −
<!DOCTYPE html>
<html>
<head>
<title>Multiple Tags in Tables</title>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
table {
width: 500px;
margin: 10px;
}
th, td {
padding: 15px;
text-align: left;
vertical-align: top;
}
</style>
</head>
<body style="font-family: Arial, sans-serif;">
<h1 style="color: #333;">Technology Points</h1>
<table>
<tr>
<th>Technologies</th>
<th>Points</th>
</tr>
<tr>
<td>
<strong>Programming Languages</strong>
<ul>
<li>C++</li>
<li>Java</li>
<li>C</li>
</ul>
</td>
<td><strong>100</strong></td>
</tr>
<tr>
<td>
<strong>Database</strong>
<ul>
<li>MySQL</li>
<li>Oracle</li>
<li>CouchDB</li>
</ul>
</td>
<td><strong>50</strong></td>
</tr>
</table>
</body>
</html>
The output displays a table with both strong text formatting and lists combined −
Technology Points ???????????????????????????????????????? ? Technologies ? Points ? ???????????????????????????????????????? ? Programming Languages ? 100 ? ? ? C++ ? ? ? ? Java ? ? ? ? C ? ? ???????????????????????????????????????? ? Database ? 50 ? ? ? MySQL ? ? ? ? Oracle ? ? ? ? CouchDB ? ? ????????????????????????????????????????
Other HTML Elements in Tables
Besides paragraphs and lists, you can use many other HTML elements inside table cells including −
<img>tags for images<a>tags for links<form>elements for input fields<div>and<span>for styling containers<strong>,<em>,<code>for text formatting
Best Practices
When using HTML tags inside tables, follow these recommendations −
Use
vertical-align: top
7K+ Views
