In this video you will learn the HTML Tables elements and the nested order of the table tag, tr, th and td which all of them are html table elements that build the table.
Then you will learn how to add the caption to the table.

If You Want Visual Explain:

Defining an HTML Table

An HTML table is defined with the <table> tag.

Each table row is defined with the <tr> tag. A table header is defined with the <th> tag. By default, table headings are bold and centered. A table data/cell is defined with the <td> tag.

Example:

 <table style="border:3px solid red;">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Ali</td>
    <td>John</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Saly</td>
    <td>Ahmed</td>
    <td>94</td>
  </tr>
</table> 

Note: The <td> elements are the data containers of the table.
They can contain all sorts of HTML elements; text, images, lists, other tables, etc.

HTML Table – Adding a Border With CSS

If you do not specify a border for the table, it will be displayed without borders. A border is set using the CSS border property:

Example:

table, th, td {
  border: 1px solid black;
}

HTML Table – Collapsed Borders

If you want the borders to collapse into one border, add the CSS border-collapse property.

Example:

table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}

HTML Table – Adding Cell Padding

Cell padding specifies the space between the cell content and its borders. If you do not specify a padding, the table cells will be displayed without padding. To set the padding, use the CSS padding property.

Fore Example:

th, td {
  padding: 15px;
}

HTML Table – Cells that Span Many Columns

To make a cell span more than one column, use the colspan attribute.

Fore Example:

 <table style="width:100%">
  <tr>
    <th>Name</th>
    <th colspan="2">Telephone</th>
  </tr>
  <tr>
    <td>Bill Gates</td>
    <td>44556677</td>
    <td>55577859</td>
  </tr>
</table> 

HTML Table – Cells that Span Many Rows

To make a cell span more than one row, use the rowspan attribute.

Example:

 <table style="width:100%">
  <tr>
    <th>Name:</th>
    <td>Bill Gates</td>
  </tr>
  <tr>
    <th rowspan="2">Telephone:</th>
    <td>55577854</td>
  </tr>
  <tr>
    <td>55577855</td>
  </tr>
</table> 

HTML Table – Adding a Caption

Finally to add a caption to a table, use the <caption> tag.

 <table style="width:100%">
  <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>$50</td>
  </tr>
</table> 

This post is one of the HTML5 for deep understanding course. where we will learn every common elements from basic to the advanced element.

In addition each lesson has a video which you could visit and watch for more practicing and for deep understanding.

We hope that we could give the best for you and for the deep and easy understanding.

You could follow the series from our website SAFHATECH.com and go to categories and then programming and then Choose the course you want then just click next post to go step by step.

Finally we hope every thing is works as you suspect.

Consequently You could follow us at :

Website URL: https://www.safhatech.com/

Youtube: https://www.youtube.com/channel/UCIVzh6iykNowNcOUT5Gfasw

Twitter: http:// https://twitter.com/safhatech

Instegram: https://www.instagram.com/safhatech

Facebook: http:// https://www.facebook.com/Safhatech-487171875443687

Phone: 967772223681