HTML Table

HTML Table

HTML Table

HTML table is used to define tables on the web page which shows the data in tabular form.

Name Email Id Phone No Age
Aditi Musunur abd.happel@autozone-inc.info (392) 181-8544 34
Advitiya Sujeet garne-endres@progressenergyinc.info (375) 585-3565 23
Alagesan Poduri ly_cha@progressenergyinc.info (683) 734-4276 45
Amrish Ilyas yeva.brye@progressenergyinc.info (791) 729-0692 28
Aprativirya Seshan shgd@gmail.com (375) 585-3565 13
Asvathama Ponnada maria@gmail.com (524) 386-5730 32
Debasis Sundhararajan ander@mail.com (268) 508-9243 35
Gopa Trilochana starstuff@live.com (950) 926-1612 24
Jitendra Choudhary chance@outlook.com (950) 926-1612 40
Naveen Tikaram jrkorson@yahoo.ca (272) 211-7370 44

The table is divided into Rows and Columns.

  • Rows are horizontally aligned which contains one or more columns.

  • Columns are vertically aligned which contains one or more rows.

  • All the rows and columns come inside <table> tag.

  • A row is define by <tr> tag.

  • Column contains table data which are define by <th> tag and <td> tag.

  • <th> tag is used to define table heading. It makes the text bold which increase the importance of text.

  • <td> tag is used to define normal table data.

Example:
<table>
<tr>
<th>S.No</th>
<th>Courses</th>
</tr>
<tr>
<td>1</td>
<td>HTML</td>
</tr>
<tr>
<td>2</td>
<td>CSS</td>
</tr>
</table>
Run Code »

Run the code to see the effect.



HTML Border Attribute

HTML border attribute is used to give a border to a table.

  • HTML Border Attribute is defined by border="value" syntax.

  • Value can be 0,1,2,3 and more.

  • 0 is by default which shows no border.

  • 1,2,3 and more adds the border around the cell (A cell is a block which contains single data in the table).

Example:
<table border="1">
<tr>
<th>S.No</th>
<th>Courses</th>
</tr>
<tr>
<td>1</td>
<td>HTML</td>
</tr>
<tr>
<td>2</td>
<td>CSS</td>
</tr>
</table>
Run Code »

Run the code to see the effect.


HTML Colspan Attribute

To extend the one column into several columns we used colspan attribute.

Example:
<table border="1">
<tr>
<th colspan="2">Phone No.</th>
</tr>
<tr>
<td>+91 1234567898</td>
<td>+91 1234567897</td>
</tr>
<tr>
<td>+91 1234567896</td>
<td>+91 1234567894</td>
</tr>
</table>
Run Code »

Run the code to see the effect.


HTML Rowspan Attribute

To extend the one row into several rows we used rowspan attribute.

Example:
<table border="1">
<tr>
<th rowspan="3">Telephone</th>
<td>+91 1234567898</td>
</tr>
<tr>
<td>+91 1234567896</td>
</tr>
<tr>
<td>+91 1234567894</td>
</tr>
</table>
Run Code »

Run the code to see the effect.


HTML Table Caption

To add a caption (summary of table) to a table, use the <caption> tag.

  • The <caption> tag must be inserted immediately after the <table> tag.

Example:
<table border="1">
<caption>Student Marksheet</caption>
<tr>
<th>S.No</th>
<th>First Name</th>
<th>Subject</th>
<th>Marks</th>
</tr>
<tr>
<td>1</td>
<td>Ram</td>
<td>Math</td>
<td>89</td>
</tr>
<tr>
<td>2</td>
<td>Krishna</td>
<td>Physics</td>
<td>78</td>
</tr>
<tr>
<td>3</td>
<td>Mohan</td>
<td>Chemistry</td>
<td>56</td>
</tr>
</table>
Run Code »

Run the code to see the effect.


HTML Table in Hindi

Best Use:360p or more (480p or 720p)

Table