Articles → HTML → Table In HTML

Table In HTML






What Is A Table?




Picture showing how data is arranged in tabular format i.e. rows and columns

Click to Enlarge


Syntax


<table border="">
	<tr>
		<td></td>
		<td></td>
	</tr>
</table>




  1. tr stands for table row (every tr represents a new row in the table)
  2. td stands for table data (every td represents a new column in the table).
  3. Here border attribute in table tag specifies the width of the border. It could be either zero (o) or one (1)

Example


<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta charset="utf-8" />
    <title></title>
  </head>
  <body>
    <table border="1">
      <tr>
        <td>Employee</td>
        <td>Location</td>
      </tr>
      <tr>
        <td>Karan</td>
        <td>Gurgaon</td>
      </tr>
      <tr>
        <td>Ritesh</td>
        <td>Delhi</td>
      </tr>
    </table>
  </body>
</html>



Output


Picture showing the output of table in html

Click to Enlarge


Cellpadding And Cellspacing In Tables








<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta charset="utf-8" />
    <title></title>
  </head>
  <body>
    <table border="1" cellpadding="40" cellspacing="40">
      <tr>
        <td>Employee</td>
        <td>Location</td>
      </tr>
      <tr>
        <td>Karan</td>
        <td>Gurgaon</td>
      </tr>
      <tr>
        <td>Ritesh</td>
        <td>Delhi</td>
      </tr>
    </table>
  </body>
</html>




Picture showing how cellpadding and cellspacing works in table

Click to Enlarge


Rowspan And Columnspan In HTML






<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta charset="utf-8" />
    <title>Rowspan demo</title>
  </head>
  <body>
    <table border="1">
      <tr>
        <td>Employee</td>
        <td>Location</td>
      </tr>
      <tr>
        <td>Karan</td>
        <td rowspan="2">Gurgaon</td>
      </tr>
      <tr>
        <td>Ritesh</td>
      </tr>
    </table>
  </body>
</html>




Picture showing how rowspan works in the HTML table

Click to Enlarge





<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta charset="utf-8" />
    <title>Colspan demo</title>
  </head>
  <body>
    <table border="1">
      <tr>
        <td>Location</td>
        <td>Employee</td>
      </tr>
      <tr>
        <td colspan="2">Gurgaon</td>
      </tr>
      <tr>
        <td>Karan</td>
        <td>Ritesh</td>
      </tr>
    </table>
  </body>
</html>




Picture showing how colspan works in the HTML table

Click to Enlarge


Browser Support


Internet ExplorerFirefoxChromeSafariOperaEdge
YesYesYesYesYesYes



Posted By  -  Karan Gupta
 
Posted On  -  Saturday, November 26, 2016
 
Updated On  -  Sunday, December 3, 2017

Query/Feedback


Your Email Id  
 
Subject 
 
Query/FeedbackCharacters remaining 250