Javascript
 Computer >> コンピューター >  >> プログラミング >> Javascript

CSSのcaption-sideプロパティの使用法

キャプション側 プロパティを使用すると、要素のコンテンツをテーブルとの関係で配置する場所を指定できます。

例

このプロパティには、上、下、左、右の4つの値のいずれかを指定できます 。 caption-sideを実装する方法を学ぶための例を見てみましょう プロパティ：

<html>
   <head>
      <style>
         caption.top {
            caption-side:top
         }
         caption.bottom {
            caption-side:bottom
         }
      </style>
   </head>
   <body>
      <table style = "width:500px; border:3px solid gray;">
         <caption class = "top">
            Countries (Top Caption)
         </caption>
         <tr><td> India</td></tr>
         <tr><td> UK</td></tr>
         <tr><td> US</td></tr>
         <tr><td> Australia</td></tr>
      </table>
      <br />
      <table style = "width:500px; border:3px solid blue;">
         <caption class = "bottom">
            Countries (Bottom caption)
         </caption>
         <tr><td> India</td></tr>
         <tr><td> UK</td></tr>
         <tr><td> US</td></tr>
         <tr><td> Australia</td></tr>
      </table>
      <br />
   </body>
</html>

  1. CSSのlist-style-typeプロパティの使用法

    list-style-type マーカーの形状や外観を制御できます。次のコードを実行して、 list-style-typeを実装してみてください。 プロパティ 例 <html>    <head>    </head>    <body>       <ul style = "list-style-type:circle;">          <li>India

  2. CSSlist-style-imageプロパティの使用

    list-style-image 箇条書きや数字ではなく、マーカーの画像を指定します。次のコードを実行して、 list-style-imageを実装してみてください。 プロパティ： 例 <html>    <head>    </head>    <body>       <ul>          <li style = "list-style-image: url(/imag