Horje
What is HTML <table> Tag

Definition and Usage

The <table> tag defines an HTML table.

An HTML table consists of one <table> element and one or more <tr>, <th>, and <td> elements.

The <tr> element defines a table row, the <th> element defines a table header, and the <td> element defines a table cell.

An HTML table may also include <caption>, <colgroup>, <thead>, <tfoot>, and <tbody> elements.


Browser Support

Global Attributes

The <table> tag also supports the Global Attributes in HTML.


Event Attributes

The <table> tag also supports the Event Attributes in HTML.

 

 


How to create HTML <table>

It is a simple HTML table, containing two columns and two rows.
index.html
Example: HTML
 <table>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table> 

Output should be:

How to create HTML <table>

How to add collapsed borders to a table (with CSS) on HTML <table> Tag

Table with Collapsed Borders.

index.html
Example: HTML
 <html>
<head>
<style>
table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}
</style>
</head>
<body>

<table>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$80</td>
  </tr>
</table>

</body>
</html> 

Output should be:

How to add collapsed borders to a table (with CSS) on HTML <table> Tag

How to right-align a table (with CSS) on HTML <table> Tag

This is some text to be wrapped around the table. This is some text to be wrapped around the table. This is some text to be wrapped around the table.

index.html
Example: HTML
 <table style="float:right">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$80</td>
  </tr>
</table> 

Output should be:

How to right-align a table (with CSS) on HTML <table> Tag

How to center-align a table (with CSS) on HTML <table> Tag

To center a table, set left and right margin to auto.

index.html
Example: HTML
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
  border: 1px solid black;
}
table.center {
  margin-left: auto; 
  margin-right: auto;
}
</style>
</head>
<body>

<h1>Center a Table</h1>
<p>To center a table, set left and right margin to auto:</p>

<table class="center">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$80</td>
  </tr>
</table>

</body>
</html>

Output should be:

How to center-align a table (with CSS) on HTML <table> Tag

How to add background-color to a table (with CSS) o HTML <table> Tag

background-color to a table (with CSS)

index.html
Example: HTML
 <table style="background-color:#00FF00">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$80</td>
  </tr>
</table> 

Output should be:

How to add background-color to a table (with CSS) o HTML <table> Tag

How to add padding to a table (with CSS) on HTML <table> Tag

See Example.

index.html
Example: HTML
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
  border: 1px solid black;
}

th, td {
  padding: 10px;
}
</style>
</head>
<body>

<h1>Add Padding to a Table</h1>

<table>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$80</td>
  </tr>
</table>

</body>
</html>

Output should be:

How to add padding to a table (with CSS) on HTML <table> Tag

How to set table width (with CSS) on HTML <table> Tag

Add a Specific Width to a Table.

index.html
Example: HTML
 <table style="width:400px">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$80</td>
  </tr>
</table> 

Output should be:

How to set table width (with CSS) on HTML <table> Tag

How to create table headers using HTML <table> Tag

There are two examples.

  1. Horizontal headers.
  2. Vertical headers.
index.html
Example: HTML
 <table>
  <tr>
    <th>Name</th>
    <th>Email</th>
    <th>Phone</th>
  </tr>
  <tr>
    <td>John Doe</td>
    <td>[email protected]</td>
    <td>123-45-678</td>
  </tr>
</table> 

Output should be:

How to create table headers using HTML <table> Tag

How to create a table with a caption on HTML <table> Tag

The caption element

index.html
Example: HTML
 <table>
  <caption>Monthly savings</caption>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$80</td>
  </tr>
</table> 

Output should be:

How to create a table with a caption on HTML <table> Tag

How to define table cells that span more than one row or one column

Colspan and rowspan

index.html
Example: HTML
 <table>
  <tr>
    <th>Name</th>
    <th>Email</th>
    <th colspan="2">Phone</th>
  </tr>
  <tr>
    <td>John Doe</td>
    <td>[email protected]</td>
    <td>123-45-678</td>
    <td>212-00-546</td>
  </tr>
</table> 

Output should be:

How to define table cells that span more than one row or one column

How to set Default CSS Settings on HTML <table> Tag

Most browsers will display the <table> element with the following default values.

index.html
Example: HTML
<!DOCTYPE html>
<html>
<head>
<style>
table { 
  display: table;
  border-collapse: separate;
  border-spacing: 2px;
  border-color: gray;
}
</style>
</head>
<body>

<table>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$80</td>
  </tr>
</table>

</body>
</html>

Output should be:

How to set Default CSS Settings on HTML <table> Tag




html table

Related Articles
What is HTML <!--...--> Tag HTML Tag
What is HTML <!DOCTYPE> Declaration HTML Tag
What is HTML Elements and Doctypes HTML Tag
What is HTML <a> Tag HTML Tag
What is HTML <abbr> Tag HTML Tag
What is HTML <acronym> Tag HTML Tag
What is HTML <address> Tag HTML Tag
What is HTML <applet> Tag HTML Tag
What is HTML <area> Tag HTML Tag
What is HTML <article> Tag HTML Tag
What is HTML <aside> Tag HTML Tag
What is HTML <audio> Tag HTML Tag
What is HTML <b> Tag HTML Tag
What is HTML <base> Tag HTML Tag
What is HTML <basefont> Tag HTML Tag
What is HTML <bdi> Tag HTML Tag
What is HTML <bdo> Tag HTML Tag
What is HTML <big> Tag HTML Tag
What is HTML <blockquote> Tag HTML Tag
What is HTML <body> Tag HTML Tag
What is HTML <br> Tag HTML Tag
What is HTML <button> Tag HTML Tag
What is HTML <canvas> Tag HTML Tag
What is HTML <caption> Tag HTML Tag
What is HTML <center> Tag HTML Tag
What is HTML <cite> Tag HTML Tag
What is HTML <code> Tag HTML Tag
What is HTML <col> Tag HTML Tag
How to create HTML <colgroup> Tag HTML Tag
What is HTML <data> Tag HTML Tag
What is HTML <datalist> Tag HTML Tag
What is HTML <dd> Tag HTML Tag
What is HTML <del> Tag HTML Tag
What is HTML <details> Tag HTML Tag
What is HTML <dfn> Tag HTML Tag
What is HTML <dialog> Tag HTML Tag
What is HTML <dir> Tag HTML Tag
What is HTML <div> Tag HTML Tag
What is HTML <dl> Tag HTML Tag
What is HTML <dt> Tag HTML Tag
What is HTML <em> Tag HTML Tag
What is HTML <embed> Tag HTML Tag
What is HTML <fieldset> Tag HTML Tag
What is HTML <figcaption> Tag HTML Tag
What is HTML <figure> Tag HTML Tag
What is HTML <font> Tag HTML Tag
What is HTML <footer> Tag HTML Tag
What is HTML <form> Tag HTML Tag
What is HTML <frame> Tag HTML Tag
What is HTML <frameset> Tag HTML Tag
What is HTML <h1> to <h6> Tags HTML Tag
What is HTML <head> Tag HTML Tag
What is HTML <header> Tag HTML Tag
What is HTML <hgroup> Tag HTML Tag
What is HTML <hr> Tag HTML Tag
What is HTML <html> Tag HTML Tag
What is HTML <i> Tag HTML Tag
What is HTML <iframe> Tag HTML Tag
What is HTML <img> Tag HTML Tag
What is HTML <input> Tag HTML Tag
What is HTML <ins> Tag HTML Tag
What is HTML <kbd> Tag HTML Tag
What is HTML <label> Tag HTML Tag
What is HTML <legend> Tag HTML Tag
What is HTML <li> Tag HTML Tag
What is HTML <link> Tag HTML Tag
What is HTML <main> Tag HTML Tag
What is HTML <map> Tag HTML Tag
What is HTML <mark> Tag HTML Tag
What is HTML <menu> Tag HTML Tag
What is HTML <meta> Tag HTML Tag
What is HTML <meter> Tag HTML Tag
What is HTML <nav> Tag HTML Tag
What is HTML <noframes> Tag HTML Tag
What is HTML <noscript> Tag HTML Tag
What is HTML <object> Tag HTML Tag
What is HTML <ol> Tag HTML Tag
What is HTML <optgroup> Tag HTML Tag
What is HTML <option> Tag HTML Tag
What is HTML <output> Tag HTML Tag
What is HTML <p> Tag HTML Tag
What is HTML <param> Tag HTML Tag
What is HTML <picture> Tag HTML Tag
What is HTML <pre> Tag HTML Tag
What is HTML <progress> Tag HTML Tag
What is HTML <q> Tag HTML Tag
What is HTML <rp> Tag HTML Tag
What is HTML <rt> Tag HTML Tag
What is HTML <ruby> Tag HTML Tag
What is HTML <s> Tag HTML Tag
What is HTML <samp> Tag HTML Tag
What is HTML <script> Tag HTML Tag
What is HTML <search> Tag HTML Tag
What is HTML <section> Tag HTML Tag
What is HTML <select> Tag HTML Tag
What is HTML <small> Tag HTML Tag
What is HTML <source> Tag HTML Tag
What is HTML <span> Tag HTML Tag
What is HTML <strike> Tag HTML Tag
What is HTML <strong> Tag HTML Tag
What is HTML <style> Tag HTML Tag
What is HTML <sub> Tag HTML Tag
What is HTML <summary> Tag HTML Tag
What is HTML <sup> Tag HTML Tag
What is HTML <svg> Tag HTML Tag
What is HTML <table> Tag HTML Tag
What is HTML <tbody> Tag HTML Tag
What is HTML <td> Tag HTML Tag
What is HTML <template> Tag HTML Tag
What is HTML <textarea> Tag HTML Tag
What is HTML <tfoot> Tag HTML Tag
What is HTML <th> Tag HTML Tag
What is HTML <thead> Tag HTML Tag
What is HTML <time> Tag HTML Tag
What is HTML <title> Tag HTML Tag
What is HTML <tr> Tag HTML Tag
What is HTML <track> Tag HTML Tag
What is HTML <tt> Tag HTML Tag
What is HTML <u> Tag HTML Tag
What is HTML <ul> Tag HTML Tag
What is HTML <var> Tag HTML Tag
What is HTML <video> Tag HTML Tag
How to add HTML <wbr> Tag HTML Tag

Single Articles
How to create HTML <table>HTML Tag
How to add collapsed borders to a table (with CSS) on HTML <table> TagHTML Tag
How to right-align a table (with CSS) on HTML <table> TagHTML Tag
How to center-align a table (with CSS) on HTML <table> TagHTML Tag
How to add background-color to a table (with CSS) o HTML <table> TagHTML Tag
How to add padding to a table (with CSS) on HTML <table> TagHTML Tag
How to set table width (with CSS) on HTML <table> TagHTML Tag
How to create table headers using HTML <table> TagHTML Tag
How to create a table with a caption on HTML <table> TagHTML Tag
How to define table cells that span more than one row or one columnHTML Tag
How to set Default CSS Settings on HTML <table> TagHTML Tag

Read Full:
HTML Tag
Type:
Develop
Category:
Web Tutorial
Sub Category:
HTML Tag
Uploaded:
1 month ago
Uploaded by:
Admin
Views:
97


Reffered: https://www.w3schools.com/tags/tag_table.asp

Share on: