Table Creation in HTML using <table> tag

Table Creation in HTML
A guide to creating and styling tables
in HTML

Introduction
• What is an HTML Table?
Used to display data in rows and columns
Defined using the <table> tag

Basic Table Structure
• <table>: Defines the table
• <tr>: Defines a table row
• <th>: Defines a table header
• <td>: Defines a table data cell

Example of a Simple Table
<table border='1'>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>John</td>
<td>25</td>
</tr>
</table>

Table Attributes
• border: Defines table border
• cellspacing: Space between cells
• cellpadding: Space inside cells
• width: Defines table width
• align: Aligns the table
• bgcolor: Background color

Styling Tables with CSS
• border-style: Defines border type
• border-collapse: Merges adjacent borders
• padding: Space inside cells
• text-align: Aligns content
Example:
table {
border-collapse: collapse;
width: 100%;
}
th, td {
border: 1px solid black;
padding: 10px;
text-align: left;
}

Merging Rows and Columns
• rowspan: Merges multiple rows
• colspan: Merges multiple columns
Example:
<td colspan='2'>Merged Cell</td>
<td rowspan='2'>Merged Row</td>

Adding Background Color
• Using bgcolor attribute (deprecated)
• Using CSS background-color
Example:
td {
background-color: lightblue;
}

Responsive Tables
Using CSS to make tables mobile-friendly
• Example:
table {
width: 100%;
overflow-x: auto;
}

Example using Background-color
<html>
<head>
<title>Table Background Color Example</title>
<style>
table {
width: 50%;
border-collapse: collapse;
background-color: lightgray; /* Table background color */
}
th {
background-color: darkblue; /* Header background */
color: white; /* Text color for header */
}
td {
border: 2px solid black;
padding: 10px;
text-align: center;
}
</style>

</head>
<body>
<h2>Table with Background Colors</h2>
<table>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>John</td>
<td>21</td>
</tr>
<tr>
<td>Jane</td>
<td>22</td>
</tr>
</table>
</body>
</html>

Conclusion
• HTML tables are useful for organizing data
• CSS improves table appearance
• Use proper attributes for better design

Table Creation in HTML using <table> tag

More Related Content

Similar to Table Creation in HTML using <table> tag

Recently uploaded

Table Creation in HTML using <table> tag