Welcome Guest! (App Version 3.1)

websitnero logo name

HTML Tables

Overview

  • <table> tag is used to make tables in HTML.
  • colspan="3" will merge 3 columns horizontally.
  • rowspan="2" will merge 2 columns vertically

How to make tables in HTML

<table> tag is used to represent data in tabular format.

A table consists of rows and columns. There can be multiple rows and each row may contain 1 or more columns.

  • table - contains full table
  • thead - contains table head
  • tbody - contains table body
  • tr - contains table row
  • th - contains column heading
  • td - contains table column

Example

<table border="1">
  <thead>
    <tr><th>Name</th><th>Age</th><th>City</th></tr>
  </thead>
  <tbody>
   <tr><td>George</td><td>23</td><td>London</td></tr>
   <tr><td>Tina</td><td>19</td><td>New York</td></tr>
   <tr><td>Lara</td><td>43</td><td>Chicago</td></tr>
  </tbody>
</table>

Output:

NameAgeCity
George23London
Tina19New York
Lara43Chicago

Colspan in HTML Tables

Colspan helps in combining columns horizontally. Look at the example below:

Example

<table border="1">
  <thead>
    <tr><th>Name</th><th>Age</th><th>City</th></tr>
  </thead>
  <tbody>
   <tr><td>George</td><td>23</td><td>London</td></tr>
   <tr><td>Tina</td><td colspan="2">N/A</td></tr>
   <tr><td>Lara</td><td>43</td><td>Chicago</td></tr>
  </tbody>
</table>

Output:

NameAgeCity
George23London
TinaN/A
Lara43Chicago

Rowspan in HTML Tables

rowspan is used to combine columns vertically in HTML Tables. Look at the example below:

Example

<table border="1">
  <thead>
    <tr><th>Name</th><th>Age</th><th>City</th></tr>
  </thead>
  <tbody>
   <tr><td>George</td><td>23</td><td>London</td></tr>
   <tr><td>Tina</td><td>19</td><td rowspan="2">New York</td></tr>
   <tr><td>Lara</td><td>43</td><</tr>
  </tbody>
</table>

Output:

NameAgeCity
George23London
Tina19New York
Lara43
Further Reading

1. <table>: The Table element

WebsiteNero is highly optimized for learning various website developing technlogies. We try our best to add maximum modules and examples to help learn the concepts clearly and vividly. We try to present all content and examples as simple as we can removing any complexity to hurdle easy understanding. We try best provide you with worthful content, but we cannot guarantee full correctness of all the content on this site. While using this website, you agree to have read and accepted all our terms of use and conditions, cookie, and privacy policy. Copyright, 2013-2018 by websitenero.com. All Rights Reserved.