HTML | Título de estilo DOMPropiedad lateral

La propiedad captionSide de estilo DOM se utiliza para establecer o devolver la posición del título en una tabla .

Sintaxis:

Para obtener la propiedad captionSide
```
object.style.captionSide
```

Para establecer la propiedad captionSide

object.style.captionSide = "bottom | top | initial | inherit"

Valores devueltos: Devuelve un valor de string, que representa la posición del título de la tabla.

Valores de propiedad:

inferior: Esto se utiliza para colocar el título en la parte inferior.

Ejemplo 1:

<!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">
      GeeksforGeeks
    </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>

Producción:

Antes de hacer clic en el botón:

bottom-before

Después de hacer clic en el botón:

bottom-after

top: Esto se utiliza para colocar el título en la parte superior. Este es el valor predeterminado.

Ejemplo-2:

<!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">
      GeeksforGeeks
    </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>

Producción:

Antes de hacer clic en el botón:

top-before

Después de hacer clic en el botón:

top-after

initial: se utiliza para establecer esta propiedad en su valor predeterminado.

Ejemplo-3:

<!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">
      GeeksforGeeks
    </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>

Producción:

Antes de hacer clic en el botón:

initial-before

Después de hacer clic en el botón:

initial-after

heredar: Esto hereda la propiedad de su padre.

Ejemplo-4:

<!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">
      GeeksforGeeks
    </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>

Producción:

Antes de hacer clic en el botón:

inherit-before

Después de hacer clic en el botón:

inherit-after

Navegadores compatibles: los navegadores compatibles con la propiedad captionSide se enumeran a continuación:

Google Chrome
Internet Explorer 9.0
Firefox
Ópera
safari de manzana

Publicación traducida automáticamente

Artículo escrito por sayantanm19 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta Cancelar la respuesta