HTML caption: Main Tips
- The HTML
<caption>
adds a table caption. As a standard, this element must be the first child of the <table>. - HTML table caption can be added below the table to mimic the regular way of presenting captions for figures or images by using CSS.
![DataCamp DataCamp](https://assets.bitdegree.org/online-learning-platforms/storage/media/datacamp-logo-5f96bfc70113e.o.png)
Pros Main Features
- Easy to use with a learn-by-doing approach
- Offers quality content
- Gamified in-browser coding experience
- The price matches the quality
- Suitable for learners ranging from beginner to advanced
- Free certificates of completion
- Focused on data science skills
- Flexible learning timetable
![Udacity Udacity](https://assets.bitdegree.org/online-learning-platforms/storage/media/udacity-review-logo-small.o.png)
Pros Main Features
- Simplistic design (no unnecessary information)
- High-quality courses (even the free ones)
- Variety of features
- Nanodegree programs
- Suitable for enterprises
- Paid Certificates of completion
![Udemy Udemy](https://assets.bitdegree.org/online-learning-platforms/storage/media/udemy-logo-small.o.png)
Pros Main Features
- Easy to navigate
- No technical issues
- Seems to care about its users
- Huge variety of courses
- 30-day refund policy
- Free certificates of completion
Use of caption
The HTML <caption>
defines a table caption (or a HTML table title) for the <table>
element.
Example
<table style="width: 100%; border: 1px solid;">
<caption>Average Price List of Fruits [July 2017]</caption>
<tr>
<th>Fruits</th>
<th>Prices</th>
</tr>
<tr>
<td>Apple</td>
<td>€0.60</td>
</tr>
<tr>
<td>Banana</td>
<td>€0.32</td>
</tr>
</table>
To make the table caption appear at the bottom of a table, use the caption-side CSS property:
align (DEPRECATED)
It sets the alignment for the table caption. No longer used in HTML5.
Example
<table style="width: 100%; border: 1px solid;">
<caption align="bottom">Average Price List of Fruits [July 2017]</caption>
<tr>
<th>Fruits</th>
<th>Prices</th>
</tr>
<tr>
<td>Apple</td>
<td>€0.60</td>
</tr>
<tr>
<td>Banana</td>
<td>€0.32</td>
</tr>
</table>
Browser support
![Browser image](https://www.bitdegree.org/learn/assets/browsers/chrome-logo.jpg)
Chrome
All
![Browser image](https://www.bitdegree.org/learn/assets/browsers/edge-logo.jpg)
Edge
All
![Browser image](https://www.bitdegree.org/learn/assets/browsers/firefox-logo.jpg)
Firefox
1+
![Browser image](https://www.bitdegree.org/learn/assets/browsers/ie-logo.jpg)
IE
All
![Browser image](https://www.bitdegree.org/learn/assets/browsers/opera-logo.jpg)
Opera
All
![Browser image](https://www.bitdegree.org/learn/assets/browsers/safari-logo.jpg)
Safari
All
Mobile browser support
![Browser image](https://www.bitdegree.org/learn/assets/browsers/chrome-logo.jpg)
Chrome
All
![Browser image](https://www.bitdegree.org/learn/assets/browsers/firefox-logo.jpg)
Firefox
4+
![Browser image](https://www.bitdegree.org/learn/assets/browsers/opera-logo.jpg)
Opera
All
![Browser image](https://www.bitdegree.org/learn/assets/browsers/safari-logo.jpg)
Safari
All