HTML Table

HTML Table

Table in HTML:

Basic HTML Table

Firstname Lastname Age
Jill Smith 50
Eve Jackson 94
John Doe 80
<!DOCTYPE html>
<html>

<body>

<h2>Basic HTML Table</h2>

<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>

</body>

</html>

HTML table helps us to exhibit our content like text, image etc properly.  It’s very important to learn to create a table for every developers. So, let’s learn  everything over creating table.

Table Elements:

To create a table, you have need to know the elements of creating table.

Every table start with  <table>  tag and ends with </table> tag. In the table tag, you have to use some style and  attributes.

To create table rows, we use <tr> </tr> tag. tr means table row.

Table row contains the two different tags. One is <th> </th> tag (th stands for table head) and other is <td> </td> tag (td stands for table data).

Table Tags

Table Tag <table> </table>:

Table tag contains all table elements. 

Caption Tag <caption> </caption>:

Caption tag contains table caption. It must placed in the table tag. But table caption displayed above the table.

Table Head <thead> </thead>:

Thead tag contains head section. You can place anywhere in the table tag. But always shows the table elements in the top of the table. I recommend to use it at the top of your table content.

Table Footer <tfoot> </tfoot>:

Tfoot tag contains the footer content the table. You can place anywhere in the table tag. But it always shows the table elements at the bottom of the table. I recommend to use it at the bottom of your table content.

Tr Tag <tr> </tr>:

Tr tag stands for table row. To create a table row, you have to use tr tag.  It contains all td (table data).

Th Tag <th> </th>:

Th tag stands for table head. This tag describe the content of the table. It displays the content bold and center alignment.

Td Tag <td> </td>:

Th tag stands for table data. Th tag is used for table data. Table data shows data vertically.

Table Attributes

Border-Collapse:

Border collapse collapses the border single. Typically Border attribute make the border with some padding.

Rowspan:

Rowspan  is used for span two or more rows together.

Colspan:

Colspan  is used for span two or more columns together.

Advanced Table

Advance Table
Advance Table in HTML
Salary Slip Table
September 2019
Employee Name Jacob Smith
Employee Designation Marketing Manager
Department Digital Marketing
Total Days 25 Leave Taken 6
Allowed Leave 3 Days Worked 22
Description Earning Description Deduction
Basic Pay $5000 Tax $200
HRA $1000 Insurance $150
Conv Allowance $200 Advance $1000
Medical Allowance $350 Loan Payment $500
Total $6550 Total $1850
Net Pay $4700 Four Thousand Seven Hundred Dollars
Payment Details
Date of Transfer 23.10.2019 Account Holder Name Jacob Smith
Bank Name American Express Account Number 987 654 3210
Prepared By Approved By
<!DOCTYPE html>
<html>

<head>
<title>Advance Table</title>

<style type="text/css">
table {
padding: 5px;
width: 100%;
border: 5px solid #2C3E50;
margin: auto;
border-collapse: collapse;
table-layout: fixed;
background-color: #FBEEE6;
}

tr,
th,
td {
border: 1px solid #D6DBDF;
border-collapse: collapse;
padding: 7px;
font-size: 15px;
font-weight: 300;
height: 15px;
}

table caption {
font-size: 40px;
padding: 15px 25px;
}

.table_head {
font-weight: 600;
font-size: 45px;
background-color: #85c1e9;
color: white;
}

.space {
background-color: #85c1e9;
}

.title {
background-color: #F9E79F;
}

.date {
background-color: #3b5998;
color: white;
font-weight: 600;
font-size: 30px;
}
</style>

</head>

<body>

<table>
<caption>Advance Table in HTML</caption>

<tr>
<th class="table_logo" rowspan="2" colspan="1">
<a href="https://webxan.com"> <img src="https://webxan.com/wp-content/uploads/2019/08/cropped-WebXan-Main-Logo-2.png"></a>
</th>
<th class="table_head" colspan="2">Salary Slip </th>
<th class="table_head" rowspan="2" colspan="1">HTML Table</th>

</tr>
<th colspan="1" class="date">September</th>
<th colspan="1" class="date">2019</th>

</tr>

<tr>
<td colspan="1" class="title">Employee Name</td>
<td colspan="3">Jacob Smith</td>
</tr>

<tr>
<td colspan="1" class="title">Employee Designation</td>
<td colspan="3">Marketing Manager</td>
</tr>

<tr>
<td colspan="1" class="title">Department</td>
<td colspan="3">Digital Marketing</td>
</tr>

<tr>
<td colspan="4" class="space"></td>
</tr>

<tr>
<td class="title">Total Days</td>
<td>25</td>
<td class="title">Leave Taken</td>
<td>6</td>
</tr>

<tr>
<td class="title">Allowed Leave</td>
<td>3</td>
<td class="title">Days Worked</td>
<td>22</td>
</tr>

<tr>
<td class="title">Description</td>
<td class="title">Earning</td>
<td class="title">Description</td>
<td class="title">Deduction</td>
</tr>

<tr>
<td class="title">Basic Pay</td>
<td>$5000</td>
<td class="title">Tax</td>
<td>$200</td>
</tr>

<tr>
<td class="title">HRA</td>
<td>$1000</td>
<td class="title">Insurance</td>
<td>$150</td>
</tr>

<tr>
<td class="title">Conv Allowance</td>
<td>$200</td>
<td class="title">Advance</td>
<td>$1000</td>
</tr>

<tr>
<td class="title">Medical Allowance</td>
<td>$350</td>
<td class="title">Loan Payment</td>
<td>$500</td>
</tr>

<tr>
<td class="space" colspan="4"></td>
</tr>

<tr>
<td class="title">Total</td>
<td>$6550</td>
<td class="title">Total</td>
<td>$1850</td>
</tr>

<tr>
<td class="title">Net Pay</td>
<td>$4700</td>
<td colspan="2">Four Thousand Seven Hundred Dollars</td>
</tr>

<tr>
<td colspan="4" class="title">Payment Details</td>
</tr>

<tr>
<td class="title">Date of Transfer</td>
<td>23.10.2019</td>
<td class="title">Account Holder Name</td>
<td>Jacob Smith</td>
</tr>

<tr>
<td class="title">Bank Name</td>
<td>American Express</td>
<td class="title">Account Number</td>
<td>987 654 3210</td>
</tr>

<tr>
<td class="space" colspan="4"></td>
</tr>

<tr>
<td></td>
<td colspan="2" rowspan="2"></td>
<td></td>
</tr>

<tr>
<td class="title">Prepared By</td>
<td class="title">Approved By</td>
</tr>

</table>

</body>

</html>
Twitter
Facebook
LinkedIn
WhatsApp
Tumblr
Reddit

If you find some necessity, Share the article to your social profile. Thanks a lot!