<caption> - HTML CSS HTML Tag

HTML CSS examples for HTML Tag:caption

  1. HOME
  2. HTML CSS
  3. HTML Tag
  4. caption

Introduction

The caption element define a caption title for a table element.

A table can contain only one caption element.

The caption element doesn't have to be the first element contained in the table.

It will always be displayed above the table, regardless of where the element is defined.

The caption Element summary

Item Value
Element:caption
Permitted Parents:The table element
Local Attributes: None
Tag Style: Start and end tags
New in HTML5? No
Changes in HTML5 The align attribute is obsolete.

Style Convention 

caption {
   display: table-caption;
   text-align: center;
}

The following code shows the caption element in use.

Demo Code

ResultView the demo in separate window 

<!DOCTYPE html>
<html>
   <head> 
      <title>Example</title> 
      <style>
thead th, tfoot th { text-align:left; background:grey; color:white}
tbody th { text-align:right; background: lightgrey; color:grey}
[colspan], [rowspan] {font-weight:bold; border: medium solid black}
thead [colspan], tfoot [colspan] {text-align:center; }
caption {font-weight: bold; font-size: large; margin-bottom:5px}

      </style> 
   </head> 
   <body> 
      <table> 
         <caption>
            Results of the 2020 Survey<!--   w  ww . j a v a2 s .co  m-->
         </caption> 
         <thead> 
            <tr> 
               <th>Rank</th>
               <th>Name</th>
               <th>Level</th>
               <th colspan="2">Size &amp; Votes</th> 
            </tr> 
         </thead> 
         <tbody> 
            <tr> 
               <th>Favorite:</th>
               <td>CSS</td>
               <td>Green</td> 
               <td>Medium</td>
               <td>500</td> 
            </tr> 
            <tr> 
               <th>2nd Favorite:</th>
               <td>HTML</td>
               <td>Orange</td> 
               <td>Large</td>
               <td>450</td> 
            </tr> 
            <tr> 
               <th>3rd Favorite:</th>
               <td>SQL</td> 
               <td colspan="2" rowspan="2"> This is a test. This is a test. This is a test. </td> 
               <td>203</td> 
            </tr> 
            <tr> 
               <th rowspan="2">Joint 4th:</th> 
               <td>Oracle</td> 
               <td rowspan="2">75</td> 
            </tr> 
            <tr> 
               <td>Python</td> 
               <td>Ruby</td> 
               <td>Javascript</td> 
            </tr> 
         </tbody> 
         <tfoot> 
            <tr> 
               <th colspan="5">? 2019 java2s.com</th> 
            </tr> 
         </tfoot> 
      </table>  
   </body>
</html>

Related Tutorials