caption-side



значения свойства:


  • top
  • bottom
  • left
  • right
  • inherit



css/style.css
  • table, td{
  •  border: 1px solid #00F;
  •  font-size: 24px;
  •  border-collapse: collapse;
  • }
  •  
  • #t1 {
  •  caption-side: top;
  • }
  •  
  • #t4 {
  •  caption-side: left;
  • }
  •  
  • #t5 {
  •  caption-side: right;
  • }
table, td{
 border: 1px solid #00F;
 font-size: 24px;
 border-collapse: collapse;
}

#t1 {
 caption-side: top;
}

#t4 {
 caption-side: left;
}

#t5 {
 caption-side: right;
}


index.html
  • <!DOCTYPE html>
  • <html>
  • <head>
  •  <meta charset="utf-8" />
  •  <title>New Page</title>
  •  <link href="css/style.css" rel="stylesheet" />
  •  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
  • </head>
  • <body>
  •  <table id="t1">
  •   <caption>English / Russian</caption>
  •   <tr>
  •    <td>Hello World!</td>
  •    <td>Привет Мир!</td>
  •   </tr>
  •   <tr>
  •    <td>To be or not to be?</td>
  •    <td>Быть или не быть?</td>
  •   </tr>
  •  </table>
  •  <br />
  •  <br />
  •  <table id="t2">
  •   <caption>English / Russian</caption>
  •   <tr>
  •    <td>Hello World!</td>
  •    <td>Привет Мир!</td>
  •   </tr>
  •   <tr>
  •    <td>To be or not to be?</td>
  •    <td>Быть или не быть?</td>
  •   </tr>
  •  </table>
  •  <br />
  •  <br />
  •  <table id="t3">
  •   <caption>English / Russian</caption>
  •   <tr>
  •    <td>Hello World!</td>
  •    <td>Привет Мир!</td>
  •   </tr>
  •   <tr>
  •    <td>To be or not to be?</td>
  •    <td>Быть или не быть?</td>
  •   </tr>
  •  </table>
  •  <br />
  •  <br />
  •  <table id="t4">
  •   <caption>Capital</caption>
  •   <tr>
  •    <td>Washington</td>
  •    <td>USA</td>
  •   </tr>
  •   <tr>
  •    <td>Kiev</td>
  •    <td>Ukraine</td>
  •   </tr>
  •  </table>
  •  <br />
  •  <br />
  •  <table id="t5">
  •   <caption>Capital</caption>
  •   <tr>
  •    <td>Washington</td>
  •    <td>USA</td>
  •   </tr>
  •   <tr>
  •    <td>Kiev</td>
  •    <td>Ukraine</td>
  •   </tr>
  •  </table>
  • <script>
  •  /*JavaScript*/
  •  document.getElementById("t2").style.captionSide="top";
  •  /*jQuery*/
  •  $(document).ready(function() {
  •   $("#t3").css({ "caption-side": "bottom" });
  •  });
  • </script>
  • </body>
  • </html>
  • <!DOCTYPE html>
  • <html>
  • <head>
  •  <meta charset="utf-8" />
  •  <title>New Page</title>
  •  <link href="css/style.css" rel="stylesheet" />
  •  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
  • </head>
  • <body>
  •  <table id="t1">
  •   <caption>English / Russian</caption>
  •   <tr>
  •    <td>Hello World!</td>
  •    <td>Привет Мир!</td>
  •   </tr>
  •   <tr>
  •    <td>To be or not to be?</td>
  •    <td>Быть или не быть?</td>
  •   </tr>
  •  </table>
  •  <br />
  •  <br />
  •  <table id="t2">
  •   <caption>English / Russian</caption>
  •   <tr>
  •    <td>Hello World!</td>
  •    <td>Привет Мир!</td>
  •   </tr>
  •   <tr>
  •    <td>To be or not to be?</td>
  •    <td>Быть или не быть?</td>
  •   </tr>
  •  </table>
  •  <br />
  •  <br />
  •  <table id="t3">
  •   <caption>English / Russian</caption>
  •   <tr>
  •    <td>Hello World!</td>
  •    <td>Привет Мир!</td>
  •   </tr>
  •   <tr>
  •    <td>To be or not to be?</td>
  •    <td>Быть или не быть?</td>
  •   </tr>
  •  </table>
  •  <br />
  •  <br />
  •  <table id="t4">
  •   <caption>Capital</caption>
  •   <tr>
  •    <td>Washington</td>
  •    <td>USA</td>
  •   </tr>
  •   <tr>
  •    <td>Kiev</td>
  •    <td>Ukraine</td>
  •   </tr>
  •  </table>
  •  <br />
  •  <br />
  •  <table id="t5">
  •   <caption>Capital</caption>
  •   <tr>
  •    <td>Washington</td>
  •    <td>USA</td>
  •   </tr>
  •   <tr>
  •    <td>Kiev</td>
  •    <td>Ukraine</td>
  •   </tr>
  •  </table>
  • <script>
  •  /*JavaScript*/
  •  document.getElementById("t2").style.captionSide="top";
  •  /*jQuery*/
  •  $(document).ready(function() {
  •   $("#t3").css({ "caption-side": "bottom" });
  •  });
  • </script>
  • </body>
  • </html>