Breaking

Post Top Ad

Your Ad Spot

martes, 7 de mayo de 2019

Tablas HTML

Las tablas se utilizan para presentar datos tabulares. Aquí está una descripción rápida de los diversos elementos de la tabla.
Las tablas le permiten presentar datos tabulares de una manera agradable y estructurada. Las tablas presentan datos dentro de una cuadrícula - con filas y columnas.

Elementos básicos de la tabla

En HTML, crea tablas utilizando el <table>elemento, junto con los elementos <tr><td>.
Cada conjunto de <tr>etiquetas (etiquetas de apertura y cierre) representa una fila dentro de la tabla en la que están anidadas. Y cada conjunto de <td>etiquetas representa una celda de datos de tabla dentro de la fila en la que están anidadas.
También puede agregar encabezados de tabla utilizando el <th>elemento.
< tabla >
    < tr >
        < th > Table Header </ th >
        < th > Table Header </ th >
        < th > Table Header </ th >
    </ tr >
    < tr >
        < td > Celda de tabla </ td >
        < td > Celda de tabla </ td >
        < td > Celda de tabla </ td >
    </ tr >
    < tr >
        < td > Celda de tabla </ td >
        < td > Celda de tabla </ td >
        < td > Celda de tabla </ td >
    </ tr >
</ table >

Borde de la mesa

Puede usar CSS para agregar un borde a toda la tabla o a celdas de tabla individuales (o a ambas). Si se agrega solo a la tabla, se creará un borde alrededor del exterior de la tabla, pero no alrededor de cada una de las celdas. Así que no obtendrás ese efecto de rejilla.
En la mayoría de los casos, es probable que desee agregar bordes a todos esos elementos.
Puede usar estilos en línea , pero eso requerirá que agregue el código CSS a cada <td>elemento.
En su lugar, generalmente es más eficiente definir el borde en una hoja de estilo incrustada o externa . De esa manera, puede aplicar el borde a todas las celdas de la tabla dentro de una sola declaración.
Para hacer esto, simplemente coloque los estilos de borde dentro de un <style>elemento.
Me gusta esto:
< estilo >
    tabla , th , td {
        borde : 1px  naranja sólida  ;
    }
</ estilo >
Entonces, después de agregar esos estilos, su documento podría verse así.
<! DOCTYPE html>
< html >
    < cabeza >
        < título > Ejemplo de tabla </ título >
        < estilo >
            tabla , th , td {
                borde : 1px  naranja sólida  ;
            }
        </ estilo >
    </ cabeza >
    < cuerpo >
        < tabla >
            < tr >
                < th > Table Header </ th >
                < th > Table Header </ th >
                < th > Table Header </ th >
            </ tr >
            < tr >
                < td > Celda de tabla </ td >
                < td > Celda de tabla </ td >
                < td > Celda de tabla </ td >
            </ tr >
            < tr >
                < td > Celda de tabla </ td >
                < td > Celda de tabla </ td >
                < td > Celda de tabla </ td >
            </ tr >
        </ table >
    </ cuerpo >
</ html >
La especificación HTML5 en realidad incluye un borderatributo para las tablas, pero normalmente no se considera suficiente para la mayoría de los propósitos de diseño. Puede usarlo border="0"para sin borde, o border="1"para un borde. Sin embargo, no hay mecanismos dentro de HTML para estilizar el borde.
Por lo tanto, la mayoría de los desarrolladores utilizan CSS para agregar bordes a las tablas. A menudo no se molestan con el borderatributo.
Además, el borderatributo solo es compatible con la versión W3C de HTML (pero no con la versión WHATWG).

Colapsando la frontera

Por defecto, las celdas adyacentes tendrán su propio borde distinto. Esto dará como resultado una especie de apariencia de "doble borde".
Puedes guardar esto si lo deseas. Sin embargo, la mayoría de los desarrolladores prefieren colapsar los bordes en un solo borde sólido.
Para contraer el borde, agregue lo siguiente a su hoja de estilo.
mesa {
  colapso de la frontera : colapso ;
  }
También puede eliminar el borde del tableelemento si lo desea, ya que los bordes de las celdas se unirán para proporcionar un aspecto de borde único.
Así es como se ve el documento ahora.
<! DOCTYPE html>
< html >
    < cabeza >
        < título > Ejemplo de tabla </ título >
        < estilo >
            mesa {
                colapso de la frontera : colapso ;
            }
            th , td {
                borde : 1px  naranja sólida  ;
            }
        </ estilo >
    </ cabeza >
    < cuerpo >
        < tabla >
            < tr >
                < th > Table Header </ th >
                < th > Table Header </ th >
                < th > Table Header </ th >
            </ tr >
            < tr >
                < td > Celda de tabla </ td >
                < td > Celda de tabla </ td >
                < td > Celda de tabla </ td >
            </ tr >
            < tr >
                < td > Celda de tabla </ td >
                < td > Celda de tabla </ td >
                < td > Celda de tabla </ td >
            </ tr >
        </ table >
    </ cuerpo >
</ html >
Aquí hay más detalles sobre los bordes de la mesa si está interesado.

Acolchado celular

Puede utilizar la paddingpropiedad CSS para aplicar el relleno a las celdas. Puede especificar la cantidad de relleno que desea.
Por ejemplo, para aplicar un relleno de 10 píxeles, agregue lo siguiente a su hoja de estilo.
relleno : 10px ;
Así es como se ve el documento ahora.
<! DOCTYPE html>
< html >
    < cabeza >
        < título > Ejemplo de tabla </ título >
        < estilo >
            mesa {
                colapso de la frontera : colapso ;
            }
            th , td {
                borde : 1px  naranja sólida  ;
                relleno : 10px ;
            }
        </ estilo >
    </ cabeza >
    < cuerpo >
        < tabla >
            < tr >
                < th > Table Header </ th >
                < th > Table Header </ th >
                < th > Table Header </ th >
            </ tr >
            < tr >
                < td > Celda de tabla </ td >
                < td > Celda de tabla </ td >
                < td > Celda de tabla </ td >
            </ tr >
            < tr >
                < td > Celda de tabla </ td >
                < td > Celda de tabla </ td >
                < td > Celda de tabla </ td >
            </ tr >
        </ table >
    </ cuerpo >
</ html >

Ancho de la mesa

Los anchos se pueden especificar utilizando la widthpropiedad CSS , en píxeles o porcentajes. Especificar el ancho en píxeles le permite especificar un ancho exacto. Los porcentajes permiten que la tabla "crezca" o "se contraiga" dependiendo de lo que haya en la página y de la amplitud del navegador.
Aquí hay un ejemplo del uso de porcentajes.
mesa {
    ancho : 100% ;
    }
Tenga en cuenta que tableen este caso solo usamos el selector, porque solo estamos configurando el ancho de la tabla, no las celdas individuales.
Así es como se ve el documento ahora.
<! DOCTYPE html>
< html >
    < cabeza >
        < título > Ejemplo de tabla </ título >
        < estilo >
            mesa {
                colapso de la frontera : colapso ;
                ancho : 100% ;
            }
            th , td {
                borde : 1px  naranja sólida  ;
                relleno : 10px ;
            }
        </ estilo >
    </ cabeza >
    < cuerpo >
        < tabla >
            < tr >
                < th > Table Header </ th >
                < th > Table Header </ th >
                < th > Table Header </ th >
            </ tr >
            < tr >
                < td > Celda de tabla </ td >
                < td > Celda de tabla </ td >
                < td > Celda de tabla </ td >
            </ tr >
            < tr >
                < td > Celda de tabla </ td >
                < td > Celda de tabla </ td >
                < td > Celda de tabla </ td >
            </ tr >
        </ table >
    </ cuerpo >
</ html >

Color de fondo alternativo

Como expliqué anteriormente , el color de fondo se puede agregar a los elementos HTML usando la background-colorpropiedad CSS .
Puede aplicar un color de fondo a toda la tabla, o solo a partes de ella, como, por ejemplo, las celdas de la tabla o ciertas filas, etc.
Ahora usemos un pequeño truco de CSS para aplicar colores alternos a las filas de nuestra tabla. Entonces, la primera fila será el color A, la segunda será el color B, la tercera será el color A, la cuarta será el color B, y así sucesivamente.
Para hacer esto, use el :nth-childselector de pseudoclases de CSS junto con el valor oddevenpara determinar el color de fondo de las filas pares e impares.
tabla .alt  tr : nth-child ( par ) {
    color de fondo : #eee ;
}
tabla .alt  tr : nth-child ( impar ) {
    color de fondo : #fff ;
}
Tenga en cuenta que en este ejemplo, también creo una clase llamada alty la aplico a la tabla, luego uso esa clase como parte de mi selector en la hoja de estilo. Entonces, si hay más de una tabla en el documento, solo a las tablas con esa clase se les aplicarán estos estilos.
Así es como se ve el documento con estos estilos.
<! DOCTYPE html>
< html >
    < cabeza >
        < título > Ejemplo de tabla </ título >
        < estilo >
            mesa {
                colapso de la frontera : colapso ;
                ancho : 100% ;
            }
            th , td {
                borde : 1px  sólido  #ccc ;
                relleno : 10px ;
            }
            tabla .alt  tr : nth-child ( par ) {
                color de fondo : #eee ;
            }
            tabla .alt  tr : nth-child ( impar ) {
                color de fondo : #fff ;
            }            
        </ estilo >
    </ cabeza >
    < cuerpo >
        < table  class = "alt" >
            < tr >
                < th > Table Header </ th >
                < th > Table Header </ th >
            </ tr >
            < tr >
                < td > Celda de tabla </ td >
                < td > Celda de tabla </ td >
            </ tr >
            < tr >
                < td > Celda de tabla </ td >
                < td > Celda de tabla </ td >
            </ tr >
            < tr >
                < td > Celda de tabla </ td >
                < td > Celda de tabla </ td >
            </ tr >
            < tr >
                < td > Celda de tabla </ td >
                < td > Celda de tabla </ td >
            </ tr >
            < tr >
                < td > Celda de tabla </ td >
                < td > Celda de tabla </ td >
            </ tr >
        </ table >
    </ cuerpo >
</ html >

Colspan

Puede utilizar el colspanatributo para hacer que una celda abarque varias columnas.
Para usarlo, simplemente proporcione el número de columnas que la celda debe abarcar.
Así que aquí está un ejemplo de un encabezado de tabla que abarca dos columnas.
<! DOCTYPE html>
< html >
  < cabeza >
    < título > Mi ejemplo </ título >
    < estilo >
      mesa {
        colapso de la frontera : colapso ;
        ancho : 100% ;
      }
      th , td {
        borde : 1px  sólido  #ccc ;
        relleno : 10px ;
      }
    </ estilo >
  </ cabeza >
  < cuerpo >
    < tabla >
      < tr >
        < th  colspan = "2" > Encabezado de tabla </ th >
        < th > Table Header </ th >
      </ tr >
      < tr >
        < td > Celda de tabla </ td >
        < td > Celda de tabla </ td >
        < td > Celda de tabla </ td >
      </ tr >
      < tr >
        < td > Celda de tabla </ td >
        < td > Celda de tabla </ td >
        < td > Celda de tabla </ td >
      </ tr >
    </ table >
  </ cuerpo >
</ html >
Cuando hagas esto, necesitarás eliminar las celdas innecesarias. Entonces, en el ejemplo anterior, solo hay dos encabezados de tabla definidos en la tabla aunque hay tres columnas.

Envergadura

Rowspan es para filas, exactamente lo que Colspan es para columnas (rowpan permite que una celda abarque varias filas).
<! DOCTYPE html>
< html >
  < cabeza >
    < título > Mi ejemplo </ título >
    < estilo >
      mesa {
        colapso de la frontera : colapso ;
        ancho : 100% ;
      }
      th , td {
        borde : 1px  sólido  #ccc ;
        relleno : 10px ;
      }
    </ estilo >
  </ cabeza >
  < cuerpo >
    < tabla >
      < tr >
        < th  rowspan = "4" > Encabezado de tabla </ th >
      </ tr >
      < tr >
        < td > Celda de tabla </ td >
        < td > Celda de tabla </ td >
      </ tr >
      < tr >
        < td > Celda de tabla </ td >
        < td > Celda de tabla </ td >
      </ tr >
      < tr >
        < td > Celda de tabla </ td >
        < td > Celda de tabla </ td >
      </ tr >
    </ table >
  </ cuerpo >
</ html >
En los primeros días de la web, los diseñadores web a menudo utilizaban tablas con fines de diseño. Por ejemplo, la columna de la izquierda era una celda de tabla grande, el área de contenido principal era otra celda, etc. Esto se debía a la estructura de cuadrícula que ofrecen las tablas.
Sin embargo, esta técnica no es recomendable. CSS (y compatibilidad con el navegador) se encuentra ahora en la etapa en la que se pueden lograr diseños avanzados utilizando HTML junto con CSS.
HTML debe utilizarse para proporcionar la estructura y el significado del documento. CSS debe ser utilizado para su presentación.

No hay comentarios.:

Publicar un comentario

Dejanos tu comentario para seguir mejorando!

Post Top Ad

Your Ad Spot

Páginas