Skip to main content

Creeu una taula de 2x2 i sàpiga quan s'utilitza una taula HTML

Anonim

Les taules HTML són fàcils de crear una vegada que enteneu els conceptes bàsics de files i columnes, i també quan enteneu quan està bé utilitzar una taula i quan haureu d'evitar-los.

Una breu història de taules i disseny web

Fa molts anys, abans que els estàndards CSS i web acceptables, els dissenyadors web utilitzaven HTML

element per crear un disseny de pàgines per a llocs. Els dissenys de llocs web serien "tallats" en petites peces com un trencaclosques i després es combinaran amb una taula HTML que es mostrarà al navegador tal com es vol. Va ser un procés molt complex que va crear molts elements HTML addicionals que mai no es podrien utilitzar avui al món de pantalla múltiple en què visquin els nostres llocs web. Com que CSS es va convertir en el mètode acceptat per visualitzar i distribuir pàgines web, l'ús de taules per a això es va convertir va rebutjar i molts dissenyadors eren per error que "les taules eren dolentes". Això va ser i és fals. Les taules per al disseny són dolentes, però encara tenen un lloc en el disseny web i HTML, és a dir, per mostrar dades tabulars com ara un calendari o un horari de trens. Per a aquest contingut, l'ús d'una taula continua sent un enfocament acceptable i bo.

Llavors, com es dibuixa una taula? Comencem creant una taula simple de 2x2. Això tindrà 2 columnes (aquests són els blocs verticals) i 2 files (els blocs horitzontals). Després d'haver construït una taula de 2x2, podeu crear qualsevol taula de mida que vulgueu simplement afegint files o columnes addicionals.

Heus aquí com

  1. Primer obriu la taula

  • Obriu la primera fila amb l'etiqueta tr

  • Obriu la primera columna amb l'etiqueta td

  • Escriure el contingut de la cel·la

  • Tanca la primera cel·la i obre la segona

  • Escriure el contingut de la segona cel·la

  • Tanqueu la segona cel·la i tanqueu la fila

  • Escriu la segona fila exactament com la primera

  • A continuació, tanqueu la taula

  • Això és!

  • També podeu optar per afegir encapçalaments de taules a la vostra taula mitjançant el

    element. Aquests encapçalaments de la taula substituiran les peces de la "taula de dades" a la primera fila de la taula, com aquesta:

    NomPaper
    JeremyDissenyador
    JenniferDesenvolupador

    Quan aquesta pàgina es mostri al navegador, aquesta primera fila amb els encapçalaments de la taula, de manera predeterminada, es mostrarà en negreta i es centraran a la cel·la de la taula en què apareixen.

    Per tant, és correcte utilitzar taules en HTML?

    Sí, sempre que no els utilitzeu per a finalitats de disseny, és correcte utilitzar taules. Si necessiteu mostrar informació tabular, una taula és la manera de fer-ho. De fet, evitar una taula a causa d'una puresa equivocada per evitar aquest element HTML legítim és tan retroactiu com utilitzar-los per motius de disseny en aquest dia i edat.

    Escrit per Jennifer Kyrin. Editat per Jeremy Girard.