HTML Table

HTML Table

HTML tables allow web developers to arrange data into rows and columns.

HTML Table define

The HTML <table> tag is used to create table.

Each table row is defined with a <tr> tag. Each table header is defined with a <th> tag. Each table data/cell is defined with a <td> tag.

By default, the text in <th> elements are bold and centered and the text in <td> elements are regular and left-aligned. and They can contain all sorts of HTML elements; text, images, lists, other tables, etc.

Example

<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Ram</td>
<td>Sharma</td>
<td>48</td>
</tr>
<tr>
<td>Mohan</td>
<td>Varma</td>
<td>45</td>
</tr>
<tr>
<td>Bhargav</td>
<td>Mohan</td>
<td>40</td>
</tr>
</table>

Output:

Firstname Lastname Age
Ram Sharma 48
Mohan Varma 45
Bhargav Mohan 40

HTML Table - Add border and collapse border

To add a border to a table, use the CSS border property.

To let the borders collapse into one border, add the CSS border-collapse property.

Example

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
</style>
</head>
<body>
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Ram</td>
<td>Sharma</td>
<td>48</td>
</tr>
<tr>
<td>Mohan</td>
<td>Varma</td>
<td>45</td>
</tr>
<tr>
<td>Bhargav</td>
<td>Mohan</td>
<td>40</td>
</tr>
</table>
</body>
</html>

Output:

Firstname Lastname Age
Ram Sharma 48
Mohan Varma 45
Bhargav Mohan 40

HTML Table - Add Cell Paddingm and Left-align Headings

Cell padding specifies the space between the cell content and its borders, the table cells will be displayed without padding, To set the padding, use the CSS padding property.

By default, table headings are bold and centered, To left-align the table headings, use the CSS text-align property.

Example

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 5px;
}
th {
text-align: left;
}
</style>
</head>
<body>
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Ram</td>
<td>Sharma</td>
<td>48</td>
</tr>
<tr>
<td>Mohan</td>
<td>Varma</td>
<td>45</td>
</tr>
<tr>
<td>Bhargav</td>
<td>Mohan</td>
<td>40</td>
</tr>
</table>
</body>
</html>

Output:

Firstname Lastname Age
Ram Sharma 48
Mohan Varma 45
Bhargav Mohan 40

Leave A Comment :