saftutorials.com
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>

Lorem ipsum dolor sit amet.
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>

Lorem ipsum dolor sit amet.
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>

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>

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>

Row Head 1 Row Head 1
Column Marge
Data Cell Data Cell
Row Marge Data Cell
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>

Lorem ipsum dolor sit amet.
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>

Lorem ipsum dolor sit amet.
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>

Lorem ipsum dolor sit amet.
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>

Nested  Table  Data
Nested 
Table 
Data
Data Data Data
Nested Table
Data Data
Find us on

Facebook Google Plus Twitter Pinterest YouTube

web statistic