HTML
Tables in HTML
- Last updated Apr 25, 2024
In HTML, tables are structural elements used to display data in a tabular format, organizing information into rows and columns.
Here's the basic structure of an HTML table:
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
</table>
- <table>: The container element for the entire table.
- <tr>: Stands for table row and contains the cells (data or header) of a row.
- <th>: Represents a header cell, typically used for column and row headings.
- <td>: Represents a data cell, holding the actual content.
Example
Here's an example of a simple HTML table:
Name | Registration Number | Programming course |
---|---|---|
Mikke | 10005 | Java |
Danny | 10004 | Python |
Kenny | 10003 | .Net |
Victory | 10002 | PHP |
Jimmz | 10001 | React |
Complete code for creating a table in an HTML document:
<!doctype html>
<html lang="en">
<head>
<title>My web page</title>
<style>
table,
th,
td {
padding:10px;
border:1px solid black;
border-collapse:collapse;
}
</style>
</head>
<body>
<table class="table table-sm table-bordered">
<tr>
<th>Name</th>
<th>Registration Number</th>
<th>Programming course</th>
</tr>
<tr>
<td>Mikke</td>
<td>10005</td>
<td>Java</td>
</tr>
<tr>
<td>Danny</td>
<td>10004</td>
<td>Python</td>
</tr>
<tr>
<td>Kenny</td>
<td>10003</td>
<td>.Net</td>
</tr>
<tr>
<td>Victory</td>
<td>10002</td>
<td>PHP</td>
</tr>
<tr>
<td>Jimmz</td>
<td>10001</td>
<td>React</td>
</tr>
</table>
</body>
</html>