Açıklama
Resim yazısı tarafı özelliği, bir tablonun öğe kutusunun yerleşimini belirler. Resim yazısı.
Olası değerler
top - Resim yazısının öğe kutusunu tablo kutusunun üstüne yerleştirir.
bottom - Resim yazısının eleman kutusunu tablo kutusunun altına yerleştirir.
left - Resim yazısının öğe kutusunu tablo kutusunun soluna yerleştirir.
right - Resim yazısının öğe kutusunu tablo kutusunun sağına yerleştirir.
İçin geçerlidir
Tüm HTML konumlandırılmış öğe.
DOM Sözdizimi
object.style.captionSide = "left";
Misal
İşte bu özelliğin etkisini gösteren örnek -
<html>
<head>
<style type = "text/css">
caption.top {caption-side:top}
caption.bottom {caption-side:bottom}
caption.left {caption-side:left}
caption.right {caption-side:right}
</style>
</head>
<body>
<table style = "width:400px; border:1px solid black;">
<caption class = "top">
This caption will appear at the top
</caption>
<tr><td > Cell A</td></tr>
<tr><td > Cell B</td></tr>
</table>
<br />
<table style = "width:400px; border:1px solid black;">
<caption class = "bottom">
This caption will appear at the bottom
</caption>
<tr><td > Cell A</td></tr>
<tr><td > Cell B</td></tr>
</table>
<br />
<table style = "width:400px; border:1px solid black;">
<caption class = "left">
This caption will appear at the left
</caption>
<tr><td > Cell A</td></tr>
<tr><td > Cell B</td></tr>
</table>
<br />
<table style = "width:400px; border:1px solid black;">
<caption class = "right">
This caption will appear at the right
</caption>
<tr><td > Cell A</td></tr>
<tr><td > Cell B</td></tr>
</table>
</body>
</html>
Bu, aşağıdaki sonucu verecektir -