HTML Tables

HTML Tables


What is HTML Table.
The table is very helpful in HTML. This allows web authors to organize data into rows and columns of many types of data, such as rows, links, and other tables.


Defining an HTML Table
In order to create a table in HTML, we have to use the <table> tag in which <tr> tag is used to create table tables, and <td> tags are used to create a table data / cell . Elements under <Td> are regularly combine by default.
Example-


<!DOCTYPE html>
<html>
<body>
<h2>HTML Table</h2>
<table style="width:100%">
   <tr>
    <th>webstudy 1</th>
    <th>webstudy 2</th>
    <th>webstudy 3</th>
  </tr>
  <tr>
    <td>HTML 1</td>
    <td>HTML 2</td>
    <td>HTML 3</td>
  </tr>
  <tr>
    <td>Table 1</td>
    <td>Table 2</td>
    <td>Table 3</td>
  </tr>
  <tr>
    <td>Table 1</td>
     <td>Table 2</td>
     <td>Table 3</td>
  </tr>
</table>
</body>
</html>

Result-

HTML Table

webstudy 1 webstudy 2 webstudy 3
HTML 1 HTML 2 HTML 3
Table 1 Table 2 Table 3
Table 1 Table 2 Table 3


HTML Table - Adding a border
If you want to specify the border for the table, you have to use the CSS border property, if you create the table without the border property, then it will be displayed without the border.
Example-


<!DOCTYPE html>
<html>
   <head>
      <title>HTML Tables</title>
   </head>
   <body>
      <table border = "1">
        <tr>
    <th>webstudy 1</th>
    <th>webstudy 2</th>
    <th>webstudy 3</th>
  </tr>
  <tr>
    <td>HTML 1</td>
    <td>HTML 2</td>
    <td>HTML 3</td>
  </tr>
  <tr>
    <td>Table 1</td>
    <td>Table 2</td>
    <td>Table 3</td>
  </tr>
  <tr>
    <td>Table 1</td>
     <td>Table 2</td>
     <td>Table 3</td>
  </tr>
</table>
   </body>
</html>

Result-
HTML Table Example



HTML table - Cellpadding and cellspacing features
The HTML table has two features called cellpadding and cellspacing which we use to adjust a white space in our table cells. The cellspacing feature defines the table which is between the cells.
Example-


<!DOCTYPE html>
<html>

   <head>
      <title>HTML Table Cellpadding</title>
   </head>
   <body>
      <table border = "1" cellpadding = "5" cellspacing = "5">
        <tr>
    <th>webstudy 1</th>
    <th>webstudy 2</th>
    <th>webstudy 3</th>
  </tr>
  <tr>
    <td>HTML 1</td>
    <td>HTML 2</td>
    <td>HTML 3</td>
  </tr>
  <tr>
    <td>Table 1</td>
    <td>Table 2</td>
    <td>Table 3</td>
  </tr>
  <tr>
    <td>Table 1</td>
     <td>Table 2</td>
     <td>Table 3</td>
  </tr>
</table>
   </body>
</html>

Result-
HTML table - Cellpadding and cellspacing features



HTML table - Colspan and Rowspan Properties
If you want to merge two or more columns in one or more columns in HTML tables, then you have to use the colspan attribute. If you want to merge two or more rows in the HTML tables, you will use rowspan for it.
Example-


<!DOCTYPE html>
<html>

   <head>
      <title>HTML Table Colspan/Rowspan</title>
   </head>
   <body>
      <table border = "1">
         <tr>
            <th>webstudy 1</th>
             <th>webstudy  2</th>
             <th>webstudy  3</th>
         </tr>
         <tr>
            <td rowspan = "2">Row 1 Cell 1</td>
            <td>HTML 1</td>
            <td>HTML 2</td>
         </tr>
         <tr>
            <td>Table 2</td>
            <td>Table 3</td>
         </tr>
         <tr>
            <td colspan = "3">HTML HTML</td>
         </tr>
      </table>
   </body>
</html>


Result-
HTML table - Colspan and Rowspan Properties


HTML table - Background
You can set the background color by using the bgcolor feature in the HTML table
You can set the background using the background attribute.
You can also set the border color using these.

Example for bgcolor and border color.


<!DOCTYPE html>
<html>
   <head>
      <title> Table Background</title>
   </head>
   <body>
      <table border = "1" bordercolor = "green" bgcolor = "yellow">
              <tr>
    <th>webstudy 1</th>
    <th>webstudy 2</th>
    <th>webstudy 3</th>
  </tr>
  <tr>
    <td>HTML 1</td>
    <td>HTML 2</td>
    <td>HTML 3</td>
  </tr>
  <tr>
    <td>Table 1</td>
    <td>Table 2</td>
    <td>Table 3</td>
  </tr>
  <tr>
    <td>Table 1</td>
     <td>Table 2</td>
     <td>Table 3</td>
  </tr>
</table>
   </body>
</html>

Result-
HTML table - Background


Here the example is for background attribute, here we will use the image.
Example-


<!DOCTYPE html>
<html>
   <head>
      <title>HTML Table Background</title>
   </head>
   <body>
      <table border = "1" bordercolor = "green" background = "https://1.bp.blogspot.com/-KeNVzuL5aUo/W2FpHSb4MRI/AAAAAAAAARw/FPQSmKXQ-rEHFhhZ5Qa1d_gbeX9SwlO3QCK4BGAYYCw/s1600/webstudy%2Blogo.png">
            <tr>
    <th>webstudy 1</th>
    <th>webstudy 2</th>
    <th>webstudy 3</th>
  </tr>
  <tr>
    <td>HTML 1</td>
    <td>HTML 2</td>
    <td>HTML 3</td>
  </tr>
  <tr>
    <td>Table 1</td>
    <td>Table 2</td>
    <td>Table 3</td>
  </tr>
  <tr>
    <td>Table 1</td>
     <td>Table 2</td>
     <td>Table 3</td>
  </tr>
</table>
   </body>
</html>

Result-
HTML table - Background



Note - This is bg color, background, and border color characteristics excluded in HTML5




HTML table - height and width
In the HTML table, you can set the width and height attributes. And with this help you can specify the screen image.
Example-


<!DOCTYPE html>
<html>
   <head>
      <title>HTML Table Width/Height</title>
   </head>
   <body>
      <table border = "1" width = "400" height = "150">
         <tr>
            <td>webstudy 1</td>
            <td>webstudy 2</td>
         </tr>
         <tr>
            <td>Table 1</td>
            <td>Table 2</td>
         </tr>
      </table>
   </body>
</html>

Result-
HTML table - height and width



HTML table - caption
The caption tag works as an example for you in the HTML table. This tag is deprecated in the new version of HTML / XHTML.
Example-


<!DOCTYPE html>
<html>
   <head>
      <title>HTML Table Caption</title>
   </head>
   <body>
      <table border = "1" width = "100%">
         <caption> The caption</caption>
     <tr>
    <th>webstudy 1</th>
    <th>webstudy 2</th>
    <th>webstudy 3</th>
  </tr>
  <tr>
    <td>HTML 1</td>
    <td>HTML 2</td>
    <td>HTML 3</td>
  </tr>
  <tr>
    <td>Table 1</td>
    <td>Table 2</td>
    <td>Table 3</td>
  </tr>
  <tr>
    <td>Table 1</td>
     <td>Table 2</td>
     <td>Table 3</td>
  </tr>
</table>
   </body>
</html>

Result-
HTML table - caption



HTML table - Headers, Body, and Footers
You can split HTML tables into three parts - one header, one body, and footer. It has three divisions. The head and footer in it are similar to the header and footer in a word-processed document which remains the same for each page.
There are three elements for a table head, body and footer -


  • <thead> - It comes in use to create a separate table header.
  • <tbody> -  indicate the main body of the table.
  • <tfoot> - It comes in use to create a separate table footer.


Example-


 <!DOCTYPE html>
<html>
   <head>
   <title>HTML Table</title>
   </head>
   <body>
      <table border = "1" width = "100%">
         <thead>
            <tr>
               <td colspan = "4">The head of the table</td>
            </tr>
         </thead>
         <tfoot>
            <tr>
               <td colspan = "4">The foot of the table</td>
            </tr>
         </tfoot>
         <tbody>
            <tr>
               <td>webstudy cell 1</td>
               <td>webstudy Cell 2</td>
               <td>webstudy Cell 3</td>
               <td>webstudy Cell 4</td>
            </tr>
         </tbody>
      </table>
   </body>
</html>

Result-
HTML table - Headers, Body, and Footers



More examples fot html tables .
Example 1-


<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
    border: 1px solid black;
}
</style>
</head>
<body>

<h2>Bordered Table</h2>
<p>Use the CSS border property to add a border to the table.</p>

<table style="width:100%">
        <tr>
    <th>webstudy 1</th>
    <th>webstudy 2</th>
    <th>webstudy 3</th>
  </tr>
  <tr>
    <td>HTML 1</td>
    <td>HTML 2</td>
    <td>HTML 3</td>
  </tr>
  <tr>
    <td>Table 1</td>
    <td>Table 2</td>
    <td>Table 3</td>
  </tr>
  <tr>
    <td>Table 1</td>
     <td>Table 2</td>
     <td>Table 3</td>
  </tr>
</table>
</body>
</html>


Example 2-


<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
}
</style>
</head>
<body>
<table style="width:100%">
    <tr>
    <th>webstudy 1</th>
    <th>webstudy 2</th>
    <th>webstudy 3</th>
  </tr>
  <tr>
    <td>HTML 1</td>
    <td>HTML 2</td>
    <td>HTML 3</td>
  </tr>
  <tr>
    <td>Table 1</td>
    <td>Table 2</td>
    <td>Table 3</td>
  </tr>
  <tr>
    <td>Table 1</td>
     <td>Table 2</td>
     <td>Table 3</td>
  </tr>
</table>
</body>
</html>


Example 3-


<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
}
th, td {
    padding: 5px;
}
th {
    text-align: left;
}
</style>
</head>
<body>
<table style="width:100%">
  <tr>
    <th>webstudy 1</th>
    <th>webstudy 2</th>
    <th>webstudy 3</th>
  </tr>
  <tr>
    <td>HTML 1</td>
    <td>HTML 2</td>
    <td>HTML 3</td>
  </tr>
  <tr>
    <td>Table 1</td>
    <td>Table 2</td>
    <td>Table 3</td>
  </tr>
  <tr>
    <td>Table 1</td>
     <td>Table 2</td>
     <td>Table 3</td>
  </tr>
</table>
</body>
</html>


What is HTML Table- The table is very helpful in HTML. This allows web authors to organize data into rows and columns of many types of data, such as rows, links, and other tables.

Post a Comment

[blogger]

MKRdezign

Contact Form

Name

Email *

Message *

Powered by Blogger.
Javascript DisablePlease Enable Javascript To See All Widget