HTML Table Example - Learn HTML Tables

Tutorial

HTML

HTML Basic Tutorial

Introduction

Unorder list

Order list

Definition List

Table

Form

Inputs

Input attributes

Table

❮ Previous

Next ❯

In HTML, a table is used to organize and display data in a grid format of rows and columns.

Explanation of Elements

<table>: The container for the entire table.
<tr>: Defines a table row.
<th>: Defines a header cell, which is typically bold and centered.
<td>: Defines a standard data cell.

Basic Structure of an HTML Table

<table>

<tr>

<th>Header 1</th>

<th>Header 2</th>

<th>Header 3</th>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

Try it yourself

Additional Table Elements

<caption>: Adds a title to the table.
<colspan>: Allows a cell to span multiple columns.
<rowspan>: Allows a cell to span multiple rows.

Example with colspan and rowspan

<tr>

<th colspan="2">Details</th>

</tr>

<tr>

<td>City: Boston</td>

</tr>

<tr>

<td>City: Seattle</td>

</tr>

</table>

Try it yourself

Styling Tables

Tables can be styled with CSS to improve their appearance.

Example

<!DOCTYPE html>

<html>

<head>

<style>

table {

width: 100%;

border-collapse: collapse;

}

th, td {

padding: 8px;

text-align: left;

border-bottom: 1px solid #ddd;

}

tr:hover {background-color: #f5f5f5;}

th {

background-color: #f2f2f2;

}

</style>

</head>

<body>

<table>

<tr>

<th>Header 1</th>

<th>Header 2</th>

<th>Header 3</th>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

</body>

</html>

Try it yourself

❮ Previous

Next ❯

Whereisstuff is simple learing platform for beginer to advance level to improve there skills in technologies.we will provide all material free of cost.you can write a code in runkit workspace and we provide some extrac features also, you agree to have read and accepted our terms of use, cookie and privacy policy.