HTML Tables Tutorial

HTML Home

HTML Introduction

HTML Editors

HTML TAGS

HTML Paragraph

HTML Heading

HTML with CSS

HTML Text Formatting

HTML Quotation

HTML Comment

HTML Links

HTML Images

HTML Audio

HTML Video

HTML Tables

HTML Lists

HTML Class

HTML Iframes

HTML File Path

HTML Scripts

HTML Head Section

HTML Structure

HTML Symbols

HTML Character Set

HTML Entity

HTML Color Codes

HTML Forms

HTML Form Elements

HTML5 Form Element

HTML Form Attributes

HTML Others

HTML Tables Tutorial

The HTML tables is tag that catch in his cells user text, images, audio, video like all content of Web. HTML tables support in cells another HTML Tables. The HTML tables tag are start using the <table> tag then using <tr> tag for generate table rows and <td> tag is generate to data cells.

Basic Structure of HTML Table

<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML Table Tutorials</title>
</head>
<body>
<table border="1">
  <tr>
    <td>Lorem ipsum dolor sit amet.</td>
  </tr>
  <tr>
    <td>Lorem ipsum dolor sit amet.</td>
  </tr>
</table>
</body>
</html>

Copy code and try to Editor

Lorem ipsum dolor sit amet.

HTML Table with Width and Height

<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML Table Tutorials</title>
</head>
<body>
<table border="1" width="300" height="150">
  <tr>
    <td>Lorem ipsum dolor sit amet.</td>
  </tr>
  <tr>
    <td>Lorem ipsum dolor sit amet.</td>
  </tr>
</table>
</body>
</html>

Copy code and try to Editor

Lorem ipsum dolor sit amet.

HTML Table with Caption

<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML Table Tutorials</title>
</head>
<body>
<table border="1" width="300" height="150">
  <caption>This is HTML Table Caption</caption>
  <tr>
    <td>Lorem ipsum dolor sit amet.</td>
  </tr>
  <tr>
    <td>Lorem ipsum dolor sit amet.</td>
  </tr>
</table>
</body>
</html>

Copy code and try to Editor

This is HTML Table Caption
Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet.

HTML Table with Row Head

<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML Table Tutorials</title>
</head>
<body>
<table border="1" width="300" height="150">
  <tr>
    <th>Name</th>
    <th>Number</th>
  </tr>
  <tr>
    <td>John Smith</td>
    <td>1000</td>
  </tr>
  <tr>
    <td>Jacky</td>
    <td>2000</td>
  </tr>
</table>
</body>
</html>

Copy code and try to Editor

Name	Number
John Smith	1000
Jacky	2000

HTML Table with Row Span and Column Span

<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML Table Tutorials</title>
</head>
<body>
<table border="1" width="300" height="200">
  <tr>
    <th>Row Head 1</th>
    <th>Row Head 1</th>
  </tr>
  <tr>
    <td colspan="2">Column Marge</td>
  </tr>
  <tr>
    <td>Data Cell</td>
    <td>Data Cell</td>
  </tr>
  <tr>
    <td rowspan="2">Data Cell</td>
    <td>Data Cell</td>
  </tr>
  <tr>
    <td>Data Cell</td>
  </tr>
</table>
</body>
</html>

Copy code and try to Editor

Row Head 1	Row Head 1
Column Marge
Data Cell	Data Cell
Row Marge	Data Cell
Row Marge	Data Cell

HTML Table with Background Color

<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML Table Tutorials</title>
</head>
<body>
<table border="1" style="background:green;">
  <tr>
    <td>Lorem ipsum dolor sit amet.</td>
  </tr>
  <tr>
    <td>Lorem ipsum dolor sit amet.</td>
  </tr>
</table>
</body>
</html>

Copy code and try to Editor

Lorem ipsum dolor sit amet.

HTML Table with Background Image

<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML Table Tutorials</title>
</head>
<body>
<table border="1" background="../uploads/sample.png" width="350" height="200">
  <tr>
    <td>Lorem ipsum dolor sit amet.</td>
  </tr>
  <tr>
    <td>Lorem ipsum dolor sit amet.</td>
  </tr>
</table>
</body>
</html>

Copy code and try to Editor

Lorem ipsum dolor sit amet.

HTML Table with Background Animation Image

<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML Table Tutorials</title>
</head>
<body>
<table border="1" background="../uploads/sample.gif" width="350" height="200">
  <tr>
    <td>Lorem ipsum dolor sit amet.</td>
  </tr>
  <tr>
    <td>Lorem ipsum dolor sit amet.</td>
  </tr>
</table>
</body>
</html>

Copy code and try to Editor

Lorem ipsum dolor sit amet.

Nested Tables

When need a table in another table this call to be Nested Table.

HTML Table with Background Animation Image

<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML Table Tutorials</title>
</head>
<body>
<table border="1" width="300" height="200">
  <tr>
    <td>
      <table border="1">
        <tr>
          <td>Nested </td>
          <td>Table </td>
          <td>Data</td>
        </tr>
        <tr>
          <td>Nested <br></td>
          <td>Table <br></td>
          <td>Data</td>
        </tr>
        <tr>
          <td>Data</td>
          <td>Data</td>
          <td>Data
            <table border="1" bgcolor="green">
              <tr>
                <td>Nested</td>
                <td>Table</td>
              </tr>
              <tr>
                <td>Data</td>
                <td>Data</td>
              </tr>
            </table>
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>
</body>
</html>

Copy code and try to Editor

Nested

Table

Data

Nested

Table

Data

Nested	Table
Data	Data

Learn HTML

Learn CSS

Learn JS

Learn PHP

Learn ASP

Learn SQL

Learn MySQL

Learn Bootstrap

Learn WP

Learn AJAX

Learn Tools

Learn ANGULAR JS

Learn SEO

Learn Earning

Learn HOW TO

Learn CodeIgniter