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