HTML Tables

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
<!DOCTYPE html>
<html>
<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 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
Related Posts :