-1726365834.jpg)
HTML Tables are used to arrange data into rows and columns in a structured way. In this tutorial, you will learn How to use table in HTML with the helpful examples.
Lets start with basics:
To create a table in HTML you will need to use following 6 tags:
you can learn more about HTML tag -> https://tapgen.xyz/tutorial/topic_more/10/HTML+Tags
Use <table>, <thead>, <tbody>, <tr>, <th>, and <td>
HTML Table Code Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Basic HTML Table</title>
</head>
<body>
<table>
<thead>
<tr>
<th>Name</th>
<th>Mobile</th>
<th>Address</th>
</tr>
</thead>
<tbody>
<tr>
<td>Akmal</td>
<td>0125852232</td>
<td>Jhon Street, USA</td>
</tr>
<tr>
<td>Smith</td>
<td>+1 0555 238555</td>
<td>UK</td>
</tr>
</tbody>
</table>
</body>
</html>
Key HTML Table Tags
<table>: This contains Defines all the table content.<thead>: Defines the header content of table section.<tbody>: Represents the main content of a table.<tfoot>: Groups the footer content (optional).<tr>: Add table rows with<tr>: Each row of the table is defined with a<tr><th>: Defines a table header cell (bold and centered by default).<td>: Defines a table data cell. Inside<tr>, use<td>elements to define the data cells.
Summery:
An HTML table is defined with the “table” tag. we know, a table is structured with rows and columns.
What is the rows in table: “tr” tag defined the horizontal structure of the table and create a Row for table. .
What is the columns in table: (<th> and <td>): Define the vertical structure within each row. table columns are the creating blocks for defining the Table. also called Table Cells
Example:
<table>
<tr>
<td>Email</td>
<td>Mobile</td>
<td>Name</td>
</tr>
</table>
As we said. <td> create vertical cell. look at the example. here is 1 row and 3 column.
Note: In HTML tables, you can have add many rows as you need, just make sure that, each row should have the same number of cells to ensure proper alignment of the table.
Creating beautiful HTML tables with CSS
In our example you will notice that, the table are not showing. to display the table cells we need to a border at first.
How To Add a Border in table?
You can add a border to the entire table using CSS. let's see the example:
<!DOCTYPE html>
<html>
<head>
<style>
table {
width: 40%;
border-collapse: collapse; /* Ensures borders are merged */
border: 2px solid black; /* Adds a border around the table */
}
th, td {
border: 1px solid black; /* Adds a border to each cell */
padding: 8px;
text-align: left;
}
th {
background-color: #f2f2f2;
}
</style>
</head>
<body>
<table>
<tr>
<th>Name</th>
<th>Email</th>
<th>Mobile</th>
</tr>
<tr>
<td>Jhone</td>
<td>jhine@example.com</td>
<td>+9 6955566666</td>
</tr>
<tr>
<td>Sumith</td>
<td>Sumith@example.com</td>
<td>+9 6955566666</td>
</tr>
</table>
</body>
</html>
Details of CSS
-
border: 2px solid black: Adds a border around the table. you can change the border color or border width. -
border-collapse: collapse;: In CSS, this property is used to make sure that the borders between table cells are merged into a single border. -
padding: 8px;: Adding Cell Padding in an HTML Table. Cell padding specifies the space between the cell content and its borders. -
text-align: left;: This CSS property is commonly used to align the text in table cells.
Use CSS to style tables, including setting borders, padding, background colors, and hover effects. Consistent styling helps in making the table more readable and visually appealing.
If you have any other questions or need further examples, let us know and upload the question in our forum tapgen.xyz
Learn MS Excel with the world's largest web developer site. Not sure where to begin? Learn MS Excel with Tapgen step-by-step tutorial.
=================================