HTML | DOM Style captionSide Property
The DOM Style captionSide property is used to set or return the position of the caption in a table.
Syntax:
- To get the captionSide Property
object.style.captionSide
- To set the captionSide Property
object.style.captionSide = "bottom | top | initial | inherit"
Return Values: It returns a string value, which represents the position of the table caption.
Property Values:
1. bottom: This is used to position the caption on the bottom.
Example-1:
html
<!DOCTYPE html> < html > < head > < title > DOM Style captionSide Property </ title > < style > th,td { border: 2px solid black; padding: 10px; margin: 10px; } </ style > </ head > < body > < h1 style="color: green"> w3wiki </ h1 > < b > DOM Style captionSide Property </ b > < table > < caption id="caption1"> List of books </ caption > < tr > < th >Book</ th > < th >Author</ th > < th >Price</ th > </ tr > < tr > < td >Head First Java</ td > < td >Bert Bates, Kathy Sierra</ td > < td >500</ td > </ tr > < tr > < td >Introduction to Algorithms</ td > < td >CLRS</ td > < td >1000</ td > </ tr > </ table > < button onclick="setCaptionSide()" style="margin-top: 10px"> Set captionSide </ button > <!-- Script to set captionSide to bottom --> < script > function setCaptionSide() { elem = document.querySelector('#caption1'); elem.style.captionSide = 'bottom'; } </ script > </ body > </ html > |
Output:
Before clicking the button:
After clicking the button:
2. top: This is used to position the caption on the top. This is the default value.
Example-2:
html
<!DOCTYPE html> < html > < head > < title > DOM Style captionSide Property </ title > < style > th,td { border: 2px solid black; padding: 10px; margin: 10px; } #caption1 { caption-side: bottom; } </ style > </ head > < body > < h1 style="color: green"> w3wiki </ h1 > < b > DOM Style captionSide Property </ b > < table > < caption id="caption1"> List of books </ caption > < tr > < th >Book</ th > < th >Author</ th > < th >Price</ th > </ tr > < tr > < td >Head First Java</ td > < td >Bert Bates, Kathy Sierra</ td > < td >500</ td > </ tr > < tr > < td >Introduction to Algorithms</ td > < td >CLRS</ td > < td >1000</ td > </ tr > </ table > < button onclick="setCaptionSide()" style="margin-top: 10px"> Set captionSide </ button > <!-- Script to set captionSide to top --> < script > function setCaptionSide() { elem = document.querySelector('#caption1'); elem.style.captionSide = 'top'; } </ script > </ body > </ html > |
Output:
Before clicking the button:
After clicking the button:
3. initial: This is used to set this property to its default value.
Example-3:
html
<!DOCTYPE html> < html > < head > < title > DOM Style captionSide Property </ title > < style > th,td { border: 2px solid black; padding: 10px; margin: 10px; } #caption1 { caption-side: bottom; } </ style > </ head > < body > < h1 style="color: green"> w3wiki </ h1 > < b > DOM Style captionSide Property </ b > < table > < caption id="caption1"> List of books </ caption > < tr > < th >Book</ th > < th >Author</ th > < th >Price</ th > </ tr > < tr > < td >Head First Java</ td > < td >Bert Bates, Kathy Sierra</ td > < td >500</ td > </ tr > < tr > < td >Introduction to Algorithms</ td > < td >CLRS</ td > < td >1000</ td > </ tr > </ table > < button onclick="setCaptionSide()" style="margin-top: 10px"> Set captionSide </ button > <!-- Script to set captionSide to initial --> < script > function setCaptionSide() { elem = document.querySelector('#caption1'); elem.style.captionSide = 'initial'; } </ script > </ body > </ html > |
Output:
Before clicking the button:
After clicking the button:
4. inherit: This inherits the property from its parent.
Example-4:
html
<!DOCTYPE html> < html > < head > < title > DOM Style captionSide Property </ title > < style > th,td { border: 2px solid black; padding: 10px; margin: 10px; } #parent { caption-side: bottom; } </ style > </ head > < body > < h1 style="color: green"> w3wiki </ h1 > < b > DOM Style captionSide Property </ b > < div id="parent"> < table > < caption id="caption1" style="caption-side: top"> List of books </ caption > < tr > < th >Book</ th > < th >Author</ th > < th >Price</ th > </ tr > < tr > < td >Head First Java</ td > < td >Bert Bates, Kathy Sierra</ td > < td >500</ td > </ tr > < tr > < td >Introduction to Algorithms</ td > < td >CLRS</ td > < td >1000</ td > </ tr > </ table > </ div > < button onclick="setCaptionSide()" style="margin-top: 10px"> Set captionSide </ button > <!-- Script to set captionSide to inherit --> < script > function setCaptionSide() { elem = document.querySelector('#caption1'); elem.style.captionSide = 'inherit'; } </ script > </ body > </ html > |
Output:
Before clicking the button:
After clicking the button:
Supported Browsers: The browser supported by captionSide property are listed below:
- Google Chrome 1 and above
- Edge 12 and above
- Internet Explorer 8 and above
- Firefox 1 and above
- Opera 4 and above
- Apple Safari 1 and above
Contact Us