Working on Table
×
Home Courses Community Support
Working on Table

When we have so much data, we require table to display that data. By using table, we can arrange everything in row and column. MS Excel is the biggest example for the use of table.

Let's take the example of employee salary record along with designation-

Sl. No. Emp Name Emp Designation Emp Salary
1 Mr. Anuj Saini Technical Evangelist 60,000
2 Mr. Deepak Kumar Software Engineer 50,000
3 Mr. Anil Tiwari Associate Technical Evangelist 55,000
4 Mr. Anshul Verma Creative Head 80,000

We can do same in HTML. Below are the tags used for table-

<TABLE> Used to create the table
<TR> Used to create the table row
<TD> Used to create the column or to add the data in table row
<TH> Used to create the table head

See below code for above table-

<!DOCTYPE html>
<html>
<head><title>Table in HTML</title></head>
<body>
<table border="1">
<tr><td>Sl. No.</td><td>Emp Name</td><td>Emp Designation</td><td>Emp Salary</td></tr>
<tr><td>1</td><td>Mr. Anuj Saini</td><td>Technical Evangelist</td><td>60,000</td></tr>
<tr><td>2</td><td>Mr. Deepak Kumar</td><td>Software Engineer</td><td>50,000</td></tr>
<tr><td>3</td><td>Mr. Anil Tiwari</td><td>Associate Technical Evangelist</td><td>55,000</td></tr>
<tr><td>4</td><td>Mr. Anshul Verma</td><td>Creative Head</td><td>80,000</td></tr>
</table>
</body>
</html>

In the above code we have used a attribute border. It is used to set the border of table. If you will not use this attribute, then table will have no border and will not look like table.

Below are some other important attributes used for table.
<CAPTION> Used to add a caption to the table
<COLSPAN> Used to use two or more column together for data insert.
<ROWSPAN> Used to use two or more row together for data insert.

See below example-

<!DOCTYPE html>
<html>
<head><title>Table in HTML</title></head>
<body>
<table border="1" >
<caption>Table with rowspan</caption>
<tr><td>Sl. No.</td><td>Emp Name</td><td>Emp Designation</td><td>Emp Salary</td></tr>
<tr><td>1</td><td>Mr. Anuj Saini</td><td>Technical Evangelist</td><td>60,000</td></tr>
<tr><td>2</td><td>Mr. Deepak Kumar</td><td rowspan="2">Software Engineer</td><td>50,000</td></tr>
<tr><td>3</td><td>Mr. Surendra Vimal</td><td>50,000</td></tr>
<tr><td>4</td><td>Mr. Anil Tiwari</td><td>Associate Technical Evangelist</td><td>55,000</td></tr>
<tr><td>5</td><td>Mr. Anshul Verma</td><td>Creative Head</td><td>80,000</td></tr>
</table>
</body>
</html>

Above code will print the table as given in below image-

← Preview

Adding an Image

Next →

Use Division Instead of Table

NOTES

Our mission is to provide highly effective and quality education via innovative solutions. Geeksdemy look forward to bridge the gap between in-demand technology and academics in order to deliver innovative, easy, interesting and affordable learning across the Globe.

Courses

  • Python
  • Game Development with Unity 3D
  • Arduino
  • PCB & Circuit Designing
  • Robotics and Embedded C
  • 8051/8052 Embedded Systems
  • QuadCopter & UAV
  • MATLAB with Robotics
  • Raspberry Pi
Learn On the Go!
Get the Android App
Get the iOS App