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

Trending Courses

CodeIgniter

Regular : 45 Days

Fastrack : 20 Days

Crash : 10 Days

Advance Digital Marketing

Regular : 6 Months

Fastrack : 3 Months

Crash : 2 Months

React JS

Regular : 45 Days

Fastrack : 20 Days

Crash : 7 Days

Laravel

Regular : 45 Days

Fastrack : 20 Days

Crash : 10 Days

Front End Developer

Regular : 7 Month

Fastrack : 4 Month

Crash : 2 Month

Related Blogs

Request For Demo