Loading...
Loading...
00:00:00

<table> ,<thead>, <tbody> <tfoot>, <tr> , <th> <td> tags  In Table

Tables are a fundamental part of HTML, and HTML5 provides a set of elements for creating tables. In HTML5, tables are created using the following elements:

  1. <table>: This is the main table element that defines the start and end of a table.

  2. <tr>: This is the table row element that defines a row within the table.

  3. <th>: This is the table header cell element that is used to define a header cell within a table row.

  4. <td>: This is the table data cell element that is used to define a data cell within a table row.

  5. <caption>: This is an optional element that can be used to add a caption or a description to the table.

Create Table in HTML5

HTML tables are used to display data in a tabular format, with rows and columns. The <table> tag is used to create a table in HTML. Other related tags include <tr> (table row), <th> (table header), and <td> (table data/cell).

Here's a simple example of an HTML table:

<table>
    <thead>
        <tr>
            <th>S.N.</th>
            <th>Name</th>
            <th>Age</th>
            <th>City</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>Rahul</td>
            <td>23</td
            <td>Ara</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Prity</td>
            <td>19</td>
            <td>Rohtas</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>Total No.</td>
            <td>Admin</td>
            <td>Max Age</td>
            <td>Place</td>
        </tr>
    </tfoot>
</table>

In this example, we first create the table using the <table> tag. Then, we create a row using the <tr> tag. Within each row, we have cells that contain header data or regular data. The header data is defined using the <th> tag, while the regular data is defined using the <td> tag.

colspan Attribute

It's also possible to specify the number of columns a cell should span using the colspan attribute:

<td colspan="2">This cell spans two columns</td>

rowspan Attribute

And the number of rows a cell should span using the rowspan attribute:

<td rowspan="2">This cell spans two rows</td>

Apply CSS in Table

You can also add styling to your HTML tables using CSS. For example, you can set the border width, background color, text color, font size, etc. Here's an example of how you can add a border to your HTML table using CSS:

<style>
  table, th, td {
    border: 1px solid red;
    border-collapse: collapse;
  }
</style>

In addition, you can use the <caption> tag to add a caption to your table:

<table>
  <caption>My HTML Table</caption>
  <!-- table content goes here -->
</table>

It's also possible to add additional elements to your HTML table, such as <thead>, <tbody>, and <tfoot>. The <thead> tag is used to group the header content in an HTML table, while the <tbody> tag is used to group the body content in an HTML table. The <tfoot> tag is used to group the footer content in an HTML table:

See the Above Example of Table :)