in

HTML – Tablas


Las tablas HTML permiten a los autores web organizar datos como texto, imágenes, enlaces, otras tablas, etc. en filas y columnas de celdas.

Las tablas HTML se crean utilizando el etiqueta en la que el

La etiqueta se utiliza para crear filas de tablas y

La etiqueta se utiliza para crear celdas de datos. Los elementos debajo de

son regulares y están alineados a la izquierda por defecto

Ejemplo

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Tables</title>
   </head>
	
   <body>
      <table border = "1">
         <tr>
            <td>Row 1, Column 1</td>
            <td>Row 1, Column 2</td>
         </tr>
         
         <tr>
            <td>Row 2, Column 1</td>
            <td>Row 2, Column 2</td>
         </tr>
      </table>
      
   </body>
</html>

Esto producirá el siguiente resultado:

Aquí el frontera es un atributo de la etiqueta

y se usa para poner un borde en todas las celdas. Si no necesita un borde, puede usar border = «0».

Encabezado de la tabla

El encabezado de la tabla se puede definir usando

– para crear un encabezado de tabla independiente.

  • – para indicar el cuerpo principal de la tabla.

  • – para crear un pie de tabla separado.

    Una tabla puede contener varios elementos

    para indicar diferentes paginas o grupos de datos. Pero es notable que las etiquetas

    y

    deberían aparecer antes que

    Ejemplo

    <!DOCTYPE html>
    <html>
    
       <head>
          <title>HTML Table</title>
       </head>
    	
       <body>
          <table border = "1" width = "100%">
             <thead>
                <tr>
                   <td colspan = "4">This is the head of the table</td>
                </tr>
             </thead>
             
             <tfoot>
                <tr>
                   <td colspan = "4">This is the foot of the table</td>
                </tr>
             </tfoot>
             
             <tbody>
                <tr>
                   <td>Cell 1</td>
                   <td>Cell 2</td>
                   <td>Cell 3</td>
                   <td>Cell 4</td>
                </tr>
             </tbody>
             
          </table>
       </body>
    	
    </html>
    

    Esto producirá el siguiente resultado:

    Tablas anidadas

    Puede utilizar una mesa dentro de otra mesa. No solo tablas, puede usar casi todas las etiquetas dentro de la etiqueta de datos de tabla

    etiqueta. Esta etiqueta se colocará para reemplazar la etiqueta

    , que se utiliza para representar la celda de datos real. Normalmente, colocará su fila superior como encabezado de tabla como se muestra a continuación, de lo contrario, puede usar el elemento

    en cualquier fila. Los encabezados, que se definen en la etiqueta

    , están centrados y en negrita de forma predeterminada.

    Ejemplo

    <!DOCTYPE html>
    <html>
    
       <head>
          <title>HTML Table Header</title>
       </head>
    	
       <body>
          <table border = "1">
             <tr>
                <th>Name</th>
                <th>Salary</th>
             </tr>
             <tr>
                <td>Ramesh Raman</td>
                <td>5000</td>
             </tr>
             
             <tr>
                <td>Shabbir Hussein</td>
                <td>7000</td>
             </tr>
          </table>
       </body>
       
    </html>
    

    Esto producirá el siguiente resultado:

    Atributos de Cellpadding y Cellspacing

    Hay dos atributos llamados relleno celular y espacio celular que utilizará para ajustar el espacio en blanco en las celdas de su tabla. El atributo de espacio entre celdas define el espacio entre las celdas de la tabla, mientras que el relleno de celdas representa la distancia entre los bordes de las celdas y el contenido dentro de una celda.

    Ejemplo

    <!DOCTYPE html>
    <html>
    
       <head>
          <title>HTML Table Cellpadding</title>
       </head>
    	
       <body>
          <table border = "1" cellpadding = "5" cellspacing = "5">
             <tr>
                <th>Name</th>
                <th>Salary</th>
             </tr>
             <tr>
                <td>Ramesh Raman</td>
                <td>5000</td>
             </tr>
             <tr>
                <td>Shabbir Hussein</td>
                <td>7000</td>
             </tr>
          </table>
       </body>
    	
    </html>
    

    Esto producirá el siguiente resultado:

    Atributos Colspan y Rowspan

    Usarás colspan atributo si desea fusionar dos o más columnas en una sola columna. De manera similar usarás rowpan si desea fusionar dos o más filas.

    Ejemplo

    <!DOCTYPE html>
    <html>
    
       <head>
          <title>HTML Table Colspan/Rowspan</title>
       </head>
    	
       <body>
          <table border = "1">
             <tr>
                <th>Column 1</th>
                <th>Column 2</th>
                <th>Column 3</th>
             </tr>
             <tr>
                <td rowspan = "2">Row 1 Cell 1</td>
                <td>Row 1 Cell 2</td>
                <td>Row 1 Cell 3</td>
             </tr>
             <tr>
                <td>Row 2 Cell 2</td>
                <td>Row 2 Cell 3</td>
             </tr>
             <tr>
                <td colspan = "3">Row 3 Cell 1</td>
             </tr>
          </table>
       </body>
    	
    </html>
    

    Esto producirá el siguiente resultado:

    Fondos De Tablas

    Puede configurar el fondo de la tabla usando una de las siguientes dos formas:

    También puede establecer el color del borde también usando color del borde atributo.

    Nota – el bgcolor, antecedentes, y color del borde atributos obsoletos en HTML5. No utilice estos atributos.

    Ejemplo

    <!DOCTYPE html>
    <html>
    
       <head>
          <title>HTML Table Background</title>
       </head>
    	
       <body>
          <table border = "1" bordercolor = "green" bgcolor = "yellow">
             <tr>
                <th>Column 1</th>
                <th>Column 2</th>
                <th>Column 3</th>
             </tr>
             <tr>
                <td rowspan = "2">Row 1 Cell 1</td>
                <td>Row 1 Cell 2</td>
                <td>Row 1 Cell 3</td>
             </tr>
             <tr>
                <td>Row 2 Cell 2</td>
                <td>Row 2 Cell 3</td>
             </tr>
             <tr>
                <td colspan = "3">Row 3 Cell 1</td>
             </tr>
          </table>
       </body>
    	
    </html>
    

    Esto producirá el siguiente resultado:

    Aquí hay un ejemplo de uso antecedentes atributo. Aquí usaremos una imagen disponible en el directorio / images.

    <!DOCTYPE html>
    <html>
    
       <head>
          <title>HTML Table Background</title>
       </head>
    	
       <body>
          <table border = "1" bordercolor = "green" background = "/images/test.png">
             <tr>
                <th>Column 1</th>
                <th>Column 2</th>
                <th>Column 3</th>
             </tr>
             <tr>
                <td rowspan = "2">Row 1 Cell 1</td>
                <td>Row 1 Cell 2</td><td>Row 1 Cell 3</td>
             </tr>
             <tr>
                <td>Row 2 Cell 2</td>
                <td>Row 2 Cell 3</td>
             </tr>
             <tr>
                <td colspan = "3">Row 3 Cell 1</td>
             </tr>
          </table>
       </body>
    	
    </html>
    

    Esto producirá el siguiente resultado. Aquí la imagen de fondo no se aplica al encabezado de la tabla.

    Altura y ancho de la mesa

    Puede establecer el ancho y la altura de una mesa usando ancho y altura atributos. Puede especificar el ancho o alto de la tabla en términos de píxeles o en términos de porcentaje del área de pantalla disponible.

    Ejemplo

    <!DOCTYPE html>
    <html>
    
       <head>
          <title>HTML Table Width/Height</title>
       </head>
    	
       <body>
          <table border = "1" width = "400" height = "150">
             <tr>
                <td>Row 1, Column 1</td>
                <td>Row 1, Column 2</td>
             </tr>
             
             <tr>
                <td>Row 2, Column 1</td>
                <td>Row 2, Column 2</td>
             </tr>
          </table>
       </body>
    	
    </html>
    

    Esto producirá el siguiente resultado:

    Título de la tabla

    los subtítulo La etiqueta servirá como título o explicación para la tabla y aparecerá en la parte superior de la tabla. Esta etiqueta está obsoleta en la versión más reciente de HTML / XHTML.

    Ejemplo

    <!DOCTYPE html>
    <html>
    
       <head>
          <title>HTML Table Caption</title>
       </head>
    	
       <body>
          <table border = "1" width = "100%">
             <caption>This is the caption</caption>
             
             <tr>
                <td>row 1, column 1</td><td>row 1, columnn 2</td>
             </tr>
             
             <tr>
                <td>row 2, column 1</td><td>row 2, columnn 2</td>
             </tr>
          </table>
       </body>
    	
    </html>
    

    Esto producirá el siguiente resultado:

    Encabezado, cuerpo y pie de página de la tabla

    Las tablas se pueden dividir en tres partes: un encabezado, un cuerpo y un pie. El encabezado y el pie son bastante similares a los encabezados y pies de página en un documento de procesamiento de texto que siguen siendo los mismos para todas las páginas, mientras que el cuerpo es el principal contenedor de contenido de la tabla.

    Los tres elementos para separar la cabeza, el cuerpo y el pie de una mesa son:

    .

    Ejemplo

    A continuación se muestra el ejemplo de cómo usar otra tabla y otras etiquetas dentro de una celda de tabla.

    <!DOCTYPE html>
    <html>
    
       <head>
          <title>HTML Table</title>
       </head>
    	
       <body>
          <table border = "1" width = "100%">
             
             <tr>
                <td>
                   <table border = "1" width = "100%">
                      <tr>
                         <th>Name</th>
                         <th>Salary</th>
                      </tr>
                      <tr>
                         <td>Ramesh Raman</td>
                         <td>5000</td>
                      </tr>
                      <tr>
                         <td>Shabbir Hussein</td>
                         <td>7000</td>
                      </tr>
                   </table>
                </td>
             </tr>
             
          </table>
       </body>
    	
    </html>
    

    Esto producirá el siguiente resultado:

    Deja una respuesta

    Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

    java object to string

    Java convertir objeto a cadena

    apple touch icon@2

    javascript – ¿Por qué es una mala idea usar «for … in» para la iteración de matrices?

    Back to Top
    Close
    close