HTML table

HTML table

  • Table is nothing but a two dimensional matrix with a combination of rows and columns.
  • The <table> tag is used to define a table.
  • Table rows are created by using <tr> tag.
  • Table tows are divided into table data by using <td> tag.
  • The <th> tag is used to create table column heading or row heading.

    • Table border

    • The border attribute indicates border thickness of the table.
    • The default value of border is 0.

    Background color

    The bgcolor attribute is used to set the background color of a table.

    Table border color

    The bordercolor attribute is used to set the border color of a table.

    Example: Table with background color, border and border color

    <!DOCTYPE html>
    <html>
         <head>
              <title>HTML Table Example</title>
         </head>
         <body>
              <table border="1" bordercolor="blue" bgcolor="pink">
                   <tr>
                        <td align="center">Row 1, Column 1</td>
                        <td align="center">Row 1, Column 2</td>
                   </tr>
                   <tr>
                        <td align="center">Row 2, Column 1</td>
                        <td align="center">Row 2, Column 2</td>
                   </tr>
              </table>
         </body>
    </html>


    Output:
    table with border

    Table Heading

    • Table heading is the title given to the table row or column or both.
    • The <th> tag is used to create table column heading or row heading.

    Example: Table Heading

    <!DOCTYPE html>
    <html>
         <head>
              <title>HTML Table Header Example</title>
         </head>
         <body>
              <table border="1">
                   <tr>
                        <th>Subject</th>
                        <th>Total marks</th>
                   </tr>
                   <tr>
                        <td>Math</td>
                        <td>100</td>
                   </tr>
                   <tr>
                        <td>Science</td>
                        <td>100</td>
                   </tr>
              </table>
         </body>
    </html>


    Output:
    table heading

    Rowspan and Colspan Attribute

    rowspan: This attribute is used to combine two or more rows into a single cell.
    colspan: This attribute is used to combine two or more columns into a single cell.

    Example: Table rowspan and colspan attributes

    <!DOCTYPE html>
    <html>
         <head>
              <title>HTML Table Colspan & Rowspan Example</title>
         </head>
         <body>
              <table border="1">
                   <tr>
                        <th>Column 1</th>
                        <th>Column 2</th>
                        <th>Column 3</th>
                        <th>Column 4</th>
                   </tr>
                   <tr>
                        <td rowspan="2">Row 1 Cell 1</td>
                        <td>Row 1 Cell 2</td>
                        <td>Row 1 Cell 3</td>
                        <td>Row 1 Cell 4</td>
                   </tr>
                   <tr>
                        <td>Row 2 Cell 2</td>
                        <td>Row 2 Cell 3</td>
                        <td>Row 2 Cell 4</td>
                   </tr>
                   <tr>
                        <td colspan="4">Row 3 Cell 1</td>
                   </tr>
              </table>
         </body>
    </html>


    Output:
    table with rowspan and colspan

    Cellspacing and Cellpadding Attributes

    Cell spacing: Cell spacing specifies the distance between the edges of the table cells.
    Cell padding: Cell padding specifies the distance between the edges of the table cells and their content.

    Example: Table cellspacing and cellpadding attributes

    <!DOCTYPE html>
    <html>
         <head>
              <title>HTML Table Cellspacing & Cellpadding Example</title>
         </head>
         <body>
              <table border="1" cellpadding="10" cellspacing="4">
                   <tr>
                        <th>Subject</th>
                        <th>Total marks</th>
                   </tr>
                   <tr>
                        <td>Math</td>
                        <td>100</td>
                   </tr>
                   <tr>
                        <td>Science</td>
                        <td>100</td>
                   </tr>
              </table>
         </body>
    </html>


    Output:
    cellspacing table

    Width and Height Attributes

    • Width and height attributes are used to set table width and height.
    • Values are given in pixels.

    Table Caption

    • The <caption> tag is used to give heading to the whole table.
    • This tag is always placed after <table> and before first <tr> tag.

    Example: Table width, hight and caption

    <!DOCTYPE html>
    <html>
         <head>
              <title>HTML Table width, hight and caption Example</title>
         </head>
         <body>
              <table border="1" width="300" height="100">
                   <caption>Employee Details</caption>
                   <tr>
                        <th>Name</th>
                        <th>Salary</th>
                   </tr>
                   <tr>
                        <td>Varun Rathi</td>
                        <td>7000</td>
                   </tr>
                   <tr>
                        <td>Nitesh Singh</td>
                        <td>8000</td>
                   </tr>
              </table>
         </body>
    </html>


    Output:
    width height caption
    ▲