HTML Table
In this blog, you will learn about HTML Table, you will see the use of HTML Table, how to use HTML table, cell spacing, cell padding, merging HTML Table.
What is Table in HTML?
An HTML table is made up of rows and columns; it is used to represent data in a tabular format like an excel spreadsheet. It is used in a web application to represent data in a tabular format or to design a printable page like an invoice, prescription.
It is also used in digital marketing to design a newsletter or email templates for email marketing.
How to Use HTML Table
To use the table we use the following tags:
- <table>: To create table in a HTML we use table tag.
- <tr>: It is used to create a row in a table.
- <td>: it is used to create a column that contains table data.
- <th>: It is used to create a column that contains a column heading.
Example:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<table border="1">
<tr>
<th>Training Mode</th>
<th>Training Mode</th>
<th>Training Mode</th>
<th>Training Mode</th>
<th>Training Mode</th>
</tr>
<tr>
<td>Classroom | Online</td>
<td>Classroom | Online</td>
<td>Classroom | Online</td>
<td>Classroom | Online</td>
<td>Classroom | Online</td>
</tr>
</table>
</body>
</html>
Output:
Spacing in an HTML Table
To Use Space in an HTML Table we use the following attribute of an HTML:
- cellspacing: It is used to give space between table cells or columns.
- cellpadding: It is used to give space inside table cells or columns.
Example:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<table border="1" cellpadding="10" cellspacing="10">
<tr>
<th>Training Mode</th>
<th>Training Mode</th>
<th>Training Mode</th>
<th>Training Mode</th>
<th>Training Mode</th>
</tr>
<tr>
<td>Classroom | Online</td>
<td>Classroom | Online</td>
<td>Classroom | Online</td>
<td>Classroom | Online</td>
<td>Classroom | Online</td>
</tr>
</table>
</body>
</html>
Output:
How to Merge Columns or Rows in an HTML Table
To merge columns or rows we use the following attribute:
- rowspan: It is used to merge rows.
- colspan: It is used to merge columns.
Example:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<table border="1" cellpadding="10" cellspacing="10">
<tr>
<td rowspan="2">1</td>
<td colspan="2" align="center">Average</td>
<td rowspan="2">Red Eyes</td>
</tr>
<tr>
<td>height</td>
<td>weight</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
</table>
</body>
</html>
Output:
Note:
- To merge rows, the rule is that you have to delete the next row's column. If you have written rowspan=”2” then you have to delete the next row's column, if you have written rowspan=”3” then you have to delete the next two rows column.
- To merge a column, the rule is that you have to delete the next column in the same row.
Categories: web designing html
