How to create a table by using HTML5 ?
Last Updated :
12 Apr, 2024
Creating a table in HTML5 involves using the <table> element to structure data into rows <tr>, with headers <th> and data cells <td>. Attributes like borders define visual properties.
Syntax:
<table> Contents... </table>
1.Using <table>, <tr>, <td> tags
Here we Define a table in HTML using <table>, rows with <tr>, and cells with <td>. Each <tr> contains data cells `<td>` arranged in rows and columns.
Example: In this example, we create a table with two rows and two columns. The table has a border, and its cells collapse with the border using CSS.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0"
/>
<title>Table Example</title>
</head>
<body>
<table border="1"
style=" border-collapse: collapse;">
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
</tr>
<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
</tr>
</table>
</body>
</html>
Output:
Using , , tags Example O
2.Using <thead>, <tbody>, <th> for headers
In HTML, use <thead> for table headers, <tbody> for table body, and <th> for header cells. Organize content for improved accessibility and semantics.
Example: In this example we defines a table with headers and data rows. Each header cell represents a data category, and rows display corresponding values.
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width,
initial-scale=1.0"
/>
<title>Table Example</title>
</head>
<body>
<table border="1">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>City</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>30</td>
<td>New York</td>
</tr>
<tr>
<td>Jane</td>
<td>25</td>
<td>Los Angeles</td>
</tr>
</tbody>
</table>
</body>
</html>
Output:
Using , , for headers Example Output
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...