HTML Table

  • An HTML table is defined with the <table> tag.
  • In web page each table row is defined with the <tr> tag.
  • <th> tag is uses for A table heading.

Note:-By default, table heading are bold and display center alignment.

  • The <td> tag is used for table data/cell.
Example of HTML Table tag
<!DOCTYPE>
<html>
<body>
<table border="5">
<tr><th>First_Name</th><th>Last_Name</th><th>Marks</th></tr>
<tr><td>Ram</td><td>Singh</td><td>60</td></tr>
<tr><td>Ravi</td><td>Singh</td><td>80</td></tr>
<tr><td>Swati</td><td>Rajput</td><td>82</td></tr>
<tr><td>Sonu</td><td>Singh</td><td>72</td></tr>
</table>
</body>
</html>

Output

First_NameLast_NameMarks
RamSingh60
RaviSingh80
SwatiRajput82
SonuSingh72
  • Using border attributes set A border of table.
  • Using the cellpadding attributes set the property to add padding to cells.
  • Using the cellspacing attribute to add property to set the spacing between cells.
Example of cellpadding/cellspacing
<!DOCTYPE>
<html>
<body>
<table border="5" cellpadding="5" cellspacing="10">
<tr><th>First_Name</th><th>Last_Name</th><th>Marks</th></tr>
<tr><td>Sonoo</td><td>Jaiswal</td><td>60</td></tr>
<tr><td>James</td><td>William</td><td>80</td></tr>
<tr><td>Swati</td><td>Sironi</td><td>82</td></tr>
<tr><td>Chetna</td><td>Singh</td><td>72</td></tr>
</table>
</body>
</html>

Output

First_NameLast_NameMarks
SonooJaiswal60
JamesWilliam80
SwatiSironi82
ChetnaSingh72

Use of Colspan and Rowspan in HTML table

  • By using colspan attribute merge two or more columns into a single column.
  • By using rowspan attribute merge two or more rows.
Example of Colspan/rowspan
<!DOCTYPE html>
<html>
<head>

</head>
<body>

<h3>Colspan and rowspan</h3>

<h3>Cell that spans two columns:</h3>
<table>
<tr>
<th>Name</th>
<th>Email</th>
<th colspan="2">Mob no</th>
</tr>
<tr>
<td>Ram Singh</td>
<td>ram123.@gmail.com</td>
<td>123-45-678</td>
<td>212-00-546</td>
</tr>
</table>

<h3>Cell that spans two rows:</h3>
<table>
<tr>
<th>Name:</th>
<td>Ram Singh</td>
</tr>
<tr>
<th>Email:</th>
<td>ram123.@gmail.com</td>
</tr>
<tr>
<th rowspan="2">Mob no:</th>
<td>123-45-678</td>
</tr>
<tr>
<td>123-00-546</td>
</tr>
</table>

</body>
</html>

Output

Colspan and rowspan

Example of two columns:

Name Email Mob no
Ram Singh ram123.@gmail.com 123-45-678 212-00-546

Example of two rows:

Name: Ram Singh
Email: ram123.@gmail.com
Mob no: 123-45-678
123-00-546
What is HTML
  • HTML is the standard  for Hypertext Markup Language for Web pages.
  • The HTML elements tell the browser ...
    Click Here
Previous topic next topic What is an Element in HTML
  • An Hypertext Markup Language(HTML) element ...
    Click Here
Previous topic next topic HTML Headings
  • The HTML headings are used to define the heading ...
    Click Here
Previous topic next topic HTML Formatting Elements
  • The <b>  element is use for bold text, without ...
    Click Here
Previous topic next topic HTML Comments
  • The HTML Comment are describe the extra feature about ...
    Click Here
Previous topic next topic HTML Attributes
  • Every HTML element can have attributes.
  • The HTML Attribute ...
    Click Here
Previous topic next topic HTML Images
  • The <img> tag is empty
Note: The empty ...
Click Here
Previous topic next topic HTML Links
  • HTML links are hyperlinks.
  • HTML link default color is ...
    Click Here
Previous topic next topic HTML Table
  • An HTML table is defined with the <table> tag.
  • ...
    Click Here
Previous topic next topic Table Backgrounds You can set the table background using one of the ...
Click Here
Previous topic next topic Table Header, tbody and Footer
  • Tables are categories into three parts: ...
    Click Here
Previous topic next topic Basic to Advance table design in HTML Example 1 <!DOCTYPE> <html> <body> ...
Click Here
Previous topic next topic HTML div tag
  • The <div>  element is used for style blocks ...
    Click Here
Previous topic next topic HTML Lists
  • The list is the way to present the data ...
    Click Here
Previous topic next topic HTML Form
  • The HTML <form> element is used to collect user ...
    Click Here
Previous topic next topic HTML Iframe Tag
  • <iframe> an inline frame with an HTML tag ...
    Click Here
English Hindi