Tables in HTML5

How to create Tables in HTML5?

Tables:

Tables are defined by <table>-tag which is used to create the table

Tables uses the following elements to create the table

<thead>-renders head of the table
<tbody>-renders the body of the table
<tr>-renders the row of the table
<td>-It contaings the data in the table
<th>-It contains the header information in the table

Table Heading

 <table>
        <tbody>
            <tr>
                <th>Techfunda</th>
                <th>dotnetfunda</th>
                <th>ITFunda</th>
                <th>Kidsfunda</th>
           </tr>
           <tr>
                <td>ASP.NET</td>
                <td>Forums</td>
                <td>Online</td>
                <td>Drawings</td>
           </tr>
            <tr>
                <td>Javascript</td>
                <td>Bootstrap</td>
                <td>AngularJS</td>
                <td>HTML</td> 
           </tr>
        </tbody>
    </table>

In the above code snippet we have defined how to create the table. To create a table, We have taken <table> and in that table we are having <tbody> which is used to define the body of the table. We are creating head of the table in a row so we need <tr> as in a row we are giving the <th>as techfunda, dotnetfunda, itfunda, kidsfunda these are the head of the table. In the next line we are creating the <td> data in a row by using <tr>.

output

Table border:

We can create borders to the table

<table border="1" >
        <tr>
            <th>Dotnetfunda</th>
            <th>Techfunda</th>
            <th>Itfunda</th>
        </tr>
        <tr>
            <td>Forums</td>
            <td>Javascript</td>
            <td>Tutorials</td>
        </tr>
        <tr>
            <td>Articles</td>
            <td>AngularJS</td>
            <td>Offline training</td>
        </tr>
        <tr>
            <td>Codes</td>
            <td>Bootstrap</td>
            <td>online training</td>
        </tr>
    </table>

Bordered table

In the above code snippet we are creating borders to the table. In order to create the border

<table border="1" > - renders the table with border

<th>- renders the head of the body

<td> - renders the data of the table

output

Table with collapse border:

Table with collapse border collpases the border of the table

 <style>
        table,th, td{
            border:1px solid blue;
            border-collapse:collapse;
        }
    </style>
 <table >
        <tr>
            <th>Dotnetfunda</th>
            <th>Techfunda</th>
            <th>Itfunda</th>
        </tr>
        <tr>
            <td>Forums</td>
            <td>Javascript</td>
            <td>Tutorials</td>
        </tr>
        <tr>
            <td>Articles</td>
            <td>AngularJS</td>
            <td>Offline training</td>
        </tr>
        <tr>
            <td>Codes</td>
            <td>Bootstrap</td>
            <td>online training</td>
        </tr>
    </table>

Table with collapse border

In the above code snippet we have <style> attribute as

table, th, td=border as 1 px solid blue where the border appear with the blue color and border collapse as collapse which collapse the border of the table
th- defines the head of the table
td- defines the data of the table

output

Table with padding

Table with padding is used to create the space between the content

<style>
        table,th, td{
            border:1px solid silver;
             border-collapse:collapse;
           
        }
        th, td{
            padding:15px;
        }
    </style>
 <table >
        <tr>
            <th>Dotnetfunda</th>
            <th>Techfunda</th>
            <th>Itfunda</th>
        </tr>
        <tr>
            <td>Forums</td>
            <td>Javascript</td>
            <td>Tutorials</td>
        </tr>
        <tr>
            <td>Articles</td>
            <td>AngularJS</td>
            <td>Offline training</td>
        </tr>
        <tr>
            <td>Codes</td>
            <td>Bootstrap</td>
            <td>online training</td>
        </tr>
    </table>

Table with padding

In the above code snippet we have defined table padding as we have given padding to th and td as padding 15px which appears as 15px space from four sides of the table .

output

Table width:

We can create the width to the table by using style element

<style>
        table,th, td{
            border:3px solid green;
             border-collapse:collapse;
           
        }
        th, td{
            padding:15px;
        }
    </style>
 <table style="width:80%">
        <tr>
            <th>Dotnetfunda</th>
            <th>Techfunda</th>
            <th>Itfunda</th>
        </tr>
        <tr>
            <td>Forums</td>
            <td>Javascript</td>
            <td>Tutorials</td>
        </tr>
        <tr>
            <td>Articles</td>
            <td>AngularJS</td>
            <td>Offline training</td>
        </tr>
        <tr>
            <td>Codes</td>
            <td>Bootstrap</td>
            <td>online training</td>
        </tr>
    </table>

Creating width to the table

In the above code snippet we have style attribute for applying width to the table . we are applying the border as 3psx solid green to appear the border as 3px solid green and border collapse is used to collapse the border, padding is used to provide space around content. In ordere to provide the width we are applying the style in the table by using width as 80 %.

output

Table with text-Align properties:

It is used to align the content in the table to left, center and right

 <style>
        table, th, td {
            border: 3px dotted orange;
            border-collapse: collapse;
        }

        th, td {
            padding: 5px;
        }

        th {
            text-align: right;
        }
        td{
            text-align:center;
        }
    </style>
    <table style="width:50%">
        <tr>
            <th>Dotnetfunda</th>
            <th>TechFunda</th>
            <th>ITFunda</th>
        </tr>
        <tr>
            <td>Forums</td>
            <td>Bootstrap</td>
            <td>Onlinetraining</td>
        </tr>
        <tr>
            <td>Articles</td>
            <td>Javascript</td>
            <td>Offlinetraining</td>
        </tr>
        <tr>
            <td>AngularJS</td>
            <td>HTML5</td>
            <td>Tutorials</td>
        </tr>
    </table>

Table with text align properties

In the above code snippet we have align the text to right and center by using textalign property to center, left and right.

output

Table with border properties:

We can use different border properties for the table

 <style>
        th, td {
            border: 3px solid orange;
            border-collapse: collapse;
        }
        table {
            border: 5px dotted blue;
            border-spacing: 10px;
            border-bottom-color: pink;
            border-right-color: limegreen;
            border-bottom-left-radius: 10px;
            border-bottom-right-radius: 10px;
            border-top-color: red;
            border-bottom-width: 10px;
            border-top-left-radius: 20px;
            border-top-right-radius: 25px;
      
        }
    </style>
    <table style="width:50%">
        <tr>
            <th style="color:blue;">Dotnetfunda</th>
            <th>TechFunda</th>
            <th>ITFunda</th>
        </tr>
        <tr>
            <td style="border-color:red;">Forums</td>
            <td style="color:orange;">Bootstrap</td>
            <td>Onlinetraining</td>
        </tr>
        <tr>
            <td>Articles</td>
            <td>Javascript</td>
            <td style=" border-color:red;border-top-left-radius:12px;border-bottom-left-radius:12px;border-bottom-right-radius:12px;border-top-right-radius:12px;">Offlinetraining</td>
        </tr>
        <tr>
            <td>Codes</td>
            <td>HTML5</td>
            <td>Tutorials</td>
        </tr>
    </table>

Table with border properties

In the above code snippet we have used different properties to change the table

<border: 5px dotted blue;>- It aligns the border with 5 px dotted blue color
<border-spacing: 10px;>- It provides the space or gap with in the border
<border-bottom-color: pink;>- It provides the borderbottom color as pink
<border-right-color: limegreen;>- It provides the border right color as lime green
<border-bottom-left-radius: 10px;>-It is used to change the border bottom left radius
<border-bottom-right-radius: 10px;>-It changes the bogrder bootom right radius
<border-top-color: red;>-It changes the border top color
<border-bottom-width: 10px;>-It changes the width of the border bottom
<border-top-left-radius: 20px;>-It changes the border top left radius
<border-top-right-radius: 25px;>- It changes the border top radius

output

Table background

It is used to change the background of the table

<style>
        th, td {
            border: 3px solid orange;
            border-collapse: collapse;
          }
    </style>
    <table style="width:50%">
        <tr>
            <th style="background-color:blue; color:white;">Dotnetfunda</th>
            <th>TechFunda</th>
            <th>ITFunda</th>
        </tr>
        <tr>
            <td style="background-color:red; color:white;">Forums</td>
            <td style="background-color:orange;">Bootstrap</td>
            <td>Onlinetraining</td>
        </tr>
        <tr>
            <td>Articles</td>
            <td>Javascript</td>
            <td>Offlinetraining</td>
        </tr>
        <tr>
            <td>Codes</td>
            <td>HTML5</td>
            <td style="background-color:pink;">Tutorials</td>
        </tr>
    </table>

Table background

In the above code snippet we have defined how to add background color we have to use style attribute to add background color.

output

Table spacing:

Table spacing is used to provide space between the table

<table  border="1" cellspacing="25">
        <tr>
            <th>Dotnetfunda</th>
            <th>Online visitors</th>
        </tr>
        <tr>
            <td>Csharp</td>
            <td>15000</td>
        </tr>
        <tr>
            <td>ASP.NET</td>
            <td>27000</td>
        </tr>
    </table>

Table spacing

In the above code snippet we have defined the spacing of the table we have to use spacing element to provide the space between the table.

output

Table rowspan:

Table rowspan is used to add the multiple rows in a table

<h3>Tables with multiple rows</h3>
    <table border="1">
        <tr>
            <th>techfunda</th>
            <td>javascript</td>
        </tr>
        <tr>
            <th rowspan="3">Dotnetfunda</th>
            <td>Forums</td>
        <tr>
            <td>Articles</td>
        </tr>
        <tr>
            <td>Codes</td>
        </tr>
   </table>

Table with rowspan

In the above code snippet we have defined how to create multiple rows. we have to use <rowspan attribute to create multiple rows

output

Table with colspan:

Table with colspan is used to create columns in table

 <h3>Tables with colspan</h3>
    <table border="1">
        <tr>
            <th>Dotnetfunda</th>
            <th colspan="4">Techfunda</th>
        </tr>
        <tr>
            <td>Articles</td>
            <td>Bootstrap</td>
            <td>Javascript</td>
            <td>HTML5</td>
            <td>AngularJS</td>
        </tr>
   </table>

Table colspan

In the above code snippet we created columns we have table border as 1, In the first row we are having headings as dotnetfunda and we have given colspan as 4 for techfunda, In the second row we are having Articles , Bootstrap, Javascript, HTML5, AngularJS. The first element<td> is in dotnetfunda and the remaining 4 elements of <td> are in techfunda.

output

Adding Images to the Tables:

We can add images to the tables

 <style>
        .class1 {
            background-image: url('images/KidsFundaLoga.png');
            color:white;
        }
    </style>

</head>
<body>
  
    <h3>Tables with background image</h3>
    <table border="1" class="class1">
        <tr>
            <th>Dotnetfunda</th>
            <th colspan="4">Techfunda</th>
        </tr>
        <tr>
            <td>Articles</td>
            <td>Bootstrap</td>
            <td>Javascript</td>
            <td>HTML5</td>
            <td>AngularJS</td>
        </tr>
    </table>

Table with background images

In the above code snippet we added image to background of the table. we have taken <style> attribute to define the image we added image and color to the text and we have given class as to the table which appears the background image in the table.

output