Tuesday, June 18, 2024

HTML-TABLE

  • <table>: This tag defines the start of the table.
  • <caption>: This tag provides a title or caption for the table.
  • <colgroup> and <col>: These tags define the group of columns and individual column styles.
  • <thead>: This tag wraps the header row(s) of the table.
  • <tr>: This tag defines a table row.
  • <th>: This tag defines a header cell in a table.
  • <tbody>: This tag wraps the body content of the table.
  • <td>: This tag defines a standard cell in a table.
  • <tfoot>: This tag wraps the footer row(s) of the table.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Table Example</title>
<style>
table {
width: 100%;
border-collapse: collapse;
}
th, td {
border: 1px solid #000;
padding: 8px;
text-align: left;
}
caption {
font-size: 1.5em;
margin-bottom: 10px;
}
</style>
</head>
<body>
<!-- Table Element -->
<table>
<!-- Caption -->
<caption>Sample Table</caption>

<!-- Column Group -->
<colgroup>
<col style="background-color: #f2f2f2">
<col style="background-color: #ffffff">
</colgroup>

<!-- Table Head -->
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
</thead>

<!-- Table Body -->
<tbody>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
<tr>
<td>Data 3</td>
<td>Data 4</td>
</tr>
</tbody>

<!-- Table Foot -->
<tfoot>
<tr>
<td colspan="2">Footer Information</td>
</tr>
</tfoot>
</table>
</body>
</html

 

No comments:

Post a Comment