Creating Table In HTML
We have discussed the basic tags of HTML in the previous scenario. Now we are going to study some most and advanced HTML tags. sometimes you need to show your data and record on a web page in the form of the table. For this task, you should know about <table> tag in HTML.
Table In HTML:
Table: Table is a structure of rows and columns that mostly used to arrange the data in a proper way. And In this digital modern era, Tables are also widely used in communication, research, and data analysis. Tables are used to create databases and manage the data and records in tabular form on a web server.
Table <table> Tag: An HTML <table> tag is used to define a table. And other most important relative tags are used to define a HTML table.
Ø<th>: Define Table Header.
Ø<tr>: Define Table Row.
Ø<td>: Define Table Data/Cell.
Ø<thead>: Define a separate Table Header.
Ø<tbody>: Define main Table Body.
Ø<tfoot>: Define a separate Table Footer.
*Note: By default, table headings are bold and centered.
| Attribute | Description |
| <TH COLSPAN=?> | Number of Columns to Span |
| <TH ROWSPAN=?> | Number of Rows to Span |
| <TH WIDTH=?> – (in pixels) | Desired Width |
| <TH WIDTH="%"> – (percentage of table) | Width Percent |
| <TH BGCOLOR="#$$$$$$"> | Cell Color |
| <CAPTION></CAPTION> | Table Caption/Heading |
| <CAPTION ALIGN=TOP|BOTTOM> – (above/below table) | Alignment |
| <TABLE BORDER=?></TABLE> | Table Border |
| <TABLE CELLSPACING=?> | Cell Spacing |
| <TABLE CELLPADDING=?> | Cell Padding |
| <TABLE WIDTH=?> – (in pixels) | Desired Width |
| <TABLE WIDTH="%"> – (percentage of page) | Width Percent |
| <TR ALIGN=LEFT|RIGHT| CENTER|MIDDLE|BOTTOM, VALIGN=TOP|BOTTOM|MIDDLE> | ALIGN = Alignment, VALIGN = Vertical Alignment |
| <TD ALIGN=LEFT|RIGHT| CENTER|MIDDLE|BOTTOM, VALIGN=TOP|BOTTOM|MIDDLE> | ALIGN = Alignment, VALIGN = Vertical Alignment |
| <TD NOWRAP> | No line breaks |
| <TD COLSPAN=?> | Number of Columns to Span |
| <TD ROWSPAN=?> | Number of Rows to Span |
| <TD WIDTH=?> | Desired Width |
| <TD WIDTH="%"> – (percentage of table) | Width Percent |
| <TD BGCOLOR="#$$$$$$"> | Cell Color |
| <TH ALIGN=LEFT|RIGHT| CENTER|MIDDLE|BOTTOM, VALIGN=TOP|BOTTOM|MIDDLE> | ALIGN = Alignment, VALIGN = Vertical Alignment |
| <TH NOWRAP> | No Line breaks |
<table border = "1">
<tr>
<th>SID</th>
<th>Student Name</th>
</tr>
<tr>
<td>S1001</td>
<td>Aman</td>
</tr>
<tr>
<td>S1002</td>
<td>Suraj</td>
</tr>
</table>
Output:
|
Example:Complex Table
<tableborder="1">
<caption>A Complex Table</caption>
<thead>
<tr>
<thcolspan="3">Invoice #123</th>
<th>14 January 2025</th>
</tr>
<tr>
<td colspan="2"><strong>Pay to:</strong><br> My Anemone Group <br> Sikar, Rajasthan, (India)<br> PIN - 332715 </td>
<td colspan="2"><strong>Customer:</strong><br> Aman Verma <br> 123, Shrimadhopur, Sikar(Rajasthan)<br> PIN - 332726 </td>
</tr>
</thead>
<tbody>
<tr>
<th>Item Name</th> <th>Qty.</th> <th>Price</th> <th>Amount (Rs.)</th>
</tr>
<tr>
<td>English Book</td> <td>10</td> <td>250.00</td> <td>2500.00</td>
</tr>
<tr>
<td>Computer Book</td> <td>50</td> <td>200.00</td> <td>10000.00</td>
</tr>
</tbody>
<tfoot>
<tr>
<thcolspan="3">Subtotal</th> <td> 12500.00</td>
</tr>
<tr>
<thcolspan="2">Tax</th> <td> 10% </td><td>1250.00</td>
</tr>
<tr>
<thcolspan="3">Grand Total</th> <td>Rs. 13750.00</td>
</tr>
</tfoot>
</table>
Output:
| ||||||||||||||||||||||||||||||||||||||
0 Comments