<table></table> tag HTML

Example

HTML A simple code example of <table> tag

<table>
    <tr>
      <th>Coffee</th>
      <th>Tea</th>
    </tr>
    <tr>
      <td>Espresso</td>
      <td>masala tea</td>
    </tr>
    <tr>
      <td>Latte</td>
      <td>Saffron tea</td>
    </tr>
</table>

Laboratory

description & Usage

To create a content table in html, we use the <table> tag.

The table tag should have related elements such as: <th> tag - <tr> tag and <td> tag.

The <tr> tag specifies the row in the table of contents.

The <th> tag specifies the title of the table of contents.

The <td> tag defines the cells in the table of contents.

The <table> tag may include tags such as:

<tfoot> tag
<thead> tag
<colgroup> tag
<caption> tag
<tbody> tag

also use.

Browser compatibility and Support

#	Chrome	Edge	Firefox	Safari	Opera
<table>

Global Attributes

The table tag supports the HTML Global Attributes.

Event Attributes

The table tag supports the HTML Event Attributes.

More Examples

Example

HTML <table> tag with custom style -Example #1

<head>
    <style>
        table, th, td {
            border: 1px solid black;
            border-collapse: collapse;
        }
    </style>
</head>
<body>
    <table>
        <tr>
            <th>Coffee</th>
            <th>Tea</th>
        </tr>
        <tr>
            <td>Espresso</td>
            <td>masala tea</td>
        </tr>
        <tr>
            <td>Latte</td>
            <td>Saffron tea</td>
        </tr>
    </table>
</body>

Laboratory

Example

HTML <table> tag with custom style -Example #2

<table style="float: right;">
    <tr>
      <th>Coffee</th>
      <th>Tea</th>
    </tr>
    <tr>
      <td>Espresso</td>
      <td>masala tea</td>
    </tr>
    <tr>
      <td>Latte</td>
      <td>Saffron tea</td>
    </tr>
</table>

Laboratory

Example

HTML <table> tag with custom style -Example #3

<head>
    <style>
        table, th, td {
            border: 1px solid black;
        }
        table.center{
            margin-left: auto;	
            margin-right: auto;
        }
    </style>
</head>
<body>
    <table class="center">
        <tr>
            <th>Coffee</th>
            <th>Tea</th>
        </tr>
        <tr>
            <td>Espresso</td>
            <td>masala tea</td>
        </tr>
        <tr>
            <td>Latte</td>
            <td>Saffron tea</td>
        </tr>
    </table>
</body>

Laboratory

Example

HTML <table> tag with custom style -Example #4

<head>
    <style>
      table, th, td {
        border: 1px solid black;
        background-color: #00ff87;
      }
	</style>
</head>
<body>
	<table>
        <tr>
            <th>Coffee</th>
            <th>Tea</th>
        </tr>
        <tr>
            <td>Espresso</td>
            <td>masala tea</td>
        </tr>
        <tr>
            <td>Latte</td>
            <td>Saffron tea</td>
        </tr>	
    </table>
</body>

Laboratory

Example

HTML <table> tag with custom style -Example #5

<head>
    <style>
        table, th, td {
        	border: 1px solid black;
        }
        th, td {
        	padding: 10px;
        }
</style>
</head>
<body>
    <table>
        <tr>
            <th>Coffee</th>
            <th>Tea</th>
        </tr>
        <tr>
            <td>Espresso</td>
            <td>masala tea</td>
        </tr>
        <tr>
            <td>Latte</td>
            <td>Saffron tea</td>
        </tr>
    </table>
</body>

Laboratory

Example

HTML <table> tag with custom style -Example #6

<body>
    <table style="width: 500PX;">
        <tr>
            <th>Coffee</th>
            <th>Tea</th>
        </tr>
        <tr>
            <td>Espresso</td>
            <td>masala tea</td>
        </tr>
        <tr>
            <td>Latte</td>
            <td>Saffron tea</td>
	    </tr>
</table>
</body>

Laboratory

Example

HTML <table> tag with custom style -Example #7

<head>
    <style>
        tbody, th, td{
        	border: 1px solid black;
        }
    </style>
</head>
<body>
    <table>
        <tr>
            <th>name</th>
            <th>email</th>
            <th>tel</th>
        </tr>
        <tr>
            <td>ali heydari</td>
            <td>aliheydari@gmail.com</td>
            <td>09124552545</td>
        </tr>
    </table>
    <hr>
    <table>
        <tr>
            <th>name</th>
            <td>ali heydari</td>
        </tr>
        <tr>
            <th>email</th>
            <td>aliheydari@gmail.com</td>
        </tr>
        <tr>
            <th>tel</th>
            <td>09124552545</td>
        </tr>
    </table>
</body>

Laboratory

Example

HTML <table> tag with custom style -Example #8

<table>
    <caption>All kinds of tea and coffee</caption>
    <tr>
        <th>Coffee</th>
        <th>Tea</th>
    </tr>
    <tr>
        <td>Espresso</td>
        <td>masala tea</td>
    </tr>
    <tr>
        <td>Latte</td>
        <td>Saffron tea</td>
    </tr>
</table>

Laboratory

Example

HTML <table> tag with custom style -Example #9

<table>
    <tr>
        <th>name</th>
        <th>email</th>
        <th colspan="2">tel</th>
    </tr>
    <tr>
        <td>ali</td>
        <td>aliheydari@gmail.com</td>
        <td>09212545859</td>
        <td>09126660031</td>
    </tr>
</table>
<hr>
<table>
    <tr>
        <th>name</th>
        <td>ali</td>
    </tr>
    <tr>
        <th>email</th>
        <td>aliheydari@gmail.com</td>
    </tr>
    <tr>
        <th rowspan="2">Phone:</th>
        <td>123-45-678</td>
    </tr>
    <tr>
        <td>212-00-546</td>
    </tr>
</table>

Laboratory

Default CSS

Most browsers will display the table tag with the following default style:

table {
    display: table;
    border-collapse: separate;
    border-spacing: 2px;
    border-color: gray;
}