Articles → HTML → Table In HTML

Table In HTML

In this article, we will discuss tables in HTML

What Is A Table?

A table is an entity that shows the data in tabular format (contains rows and columns). The following figure gives you an idea about tabular form.

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>

In the above syntax: -

tr stands for table row (every tr represents a new row in the table)
td stands for table data (every td represents a new column in the table)
Here border attribute in the 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

Click to Enlarge

Cellpadding And Cellspacing In Tables

Cellpadding means space between the edge of the table cell and the content of the table cell.

Cellspacing means space between the individual table cells.

Let us change the previous code and add cellpadding and cellspacing attributes.

<!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>

Once you run the HTML, you see the following output: -

Picture showing how cellpadding and cellspacing works in table

Click to Enlarge

Rowspan And Columnspan In HTML

Rowspan – This attribute allows to span the table cell height to more than one cell.

See the following example

<!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>

If you run the above code, you see following output

Picture showing how rowspan works in the HTML table

Click to Enlarge

Colspan – This attribute allows to span the table cell width to more than one cell.

See the following example

<!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>

If you run the above code, you see the following output: -

Picture showing how colspan works in the HTML table

Click to Enlarge

Browser Support

Internet Explorer	Firefox	Chrome	Safari	Opera	Edge
Yes	Yes	Yes	Yes	Yes	Yes

Posted By -	Karan Gupta

Posted On -	Saturday, November 26, 2016

Updated On -	Sunday, December 3, 2017

Query/Feedback

Your Email Id		**

Subject		*

Query/Feedback	Characters remaining 250	**