Web DevelopmentCoder's Ground

Tables in HTML.

HTML – Tables. The HTML tables allow web authors to arrange data like text, images, links, other tables, etc. into a tabular format of rows and columns of cells.

Here are some common HTML tags and their uses for beginners.

A table is an arrangement of data in rows and columns, or possibly in a more complex structure. Tables are widely used in communication, research, and data analysis. Tables appear in print media, handwritten notes, computer software, architectural ornamentation, traffic signs, and many other places.

There are lots of ways of styling tables, but let’s stick to basics for now.

Example 1:-

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>table</title>
</head>

<body>
<center>
<table  border="1" cellpadding="10" cellspacing="0">

<tr>
<td rowspan="2">Particular</td>
<td rowspan="2">Qty</td>
<td rowspan="2">Rate</td>
<td colspan="2">Amount</td>
</tr>

<tr>
<td>Rs.</td>
<td>Ps.</td>
</tr>

<tr>
<td>Mobile</td>
<td>1</td>
<td>20000</td>
<td>20000</td>
<td>00</td>
</tr>

<tr>
<td>Ac</td>
<td>1</td>
<td>25000</td>
<td>25000</td>
<td>00</td>
</tr>

<tr>
<td>Refrigerator</td>
<td>2</td>
<td>20000</td>
<td>40000</td>
<td>00</td>
</tr>

<tr>
<td>Fan</td>
<td>4</td>
<td>2000</td>
<td>8000</td>
<td>00</td>
</tr>


<tr>
<td colspan="3">Total</td>
<td>_____</td>
<td>_____</td>
</tr>

</table>
</center>
</body>
</html>

Output 1:-

Example 2:-

Invoice sheet

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Table_2</title>
</head>

<body>
<center>
<h2>Tata Click</h2>

<table>
<tr>
<td width="128">I No.___________</td>
<td width="70"></td>
<td width="128">Date_____________</td>
</tr>

<tr>
<td colspan="3" height="5"></td>
</tr>

<tr>
<td colspan="3">Mr/Mrs_____________________________________</td>
</tr>

</table>
<br>
<table border="1" cellpadding="10" cellspacing="0">

<tr>
<td rowspan="2" width="65">Particular</td>
<td rowspan="2" width="65">Qty</td>
<td rowspan="2" width="65">Rate</td>
<td colspan="2" width="65">Amount</td>
</tr>

<tr>
<td>Rs.</td>
<td>Ps.</td>
</tr>

<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>

<tr>
<td colspan="3" style="text-align:right">Total</td>
<td></td>
<td></td>
</tr>


<table>
<br>
<tr>
<td colspan="5" width="340">Signature___________________</td>
</tr>
</table>

</table>
</center>
</body>
</html>

Output 2:-

Also read How to create a registration form in HTML , Basic HTML  code to start practising as a beginner

Have fun with HTML! write us at teamtechtrum@gmail.com.

Surabhi Singh

You may also like

1 Comment

  1. […] Also read, Here’s a basic HTML Code to start practicing as a beginner , Learn about tables in HTML […]

Leave a reply

Your email address will not be published. Required fields are marked *