Cómo crear una tabla en HTML

PDF download Descargar el PDF
Coescrito por Christopher Batchelor

PDF download Descargar el PDF

Este wikiHow te enseñará cómo crear una tabla de información básica utilizando HTML. También verás cómo agregar otros elementos útiles a la tabla como, por ejemplo, bordes.

Parte 1
Parte 1 de 2:

Crear una tabla

PDF download Descargar el PDF
  1. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/5\/5a\/Create-a-Table-in-HTML-Step-1.jpg\/v4-460px-Create-a-Table-in-HTML-Step-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/5\/5a\/Create-a-Table-in-HTML-Step-1.jpg\/v4-728px-Create-a-Table-in-HTML-Step-1.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Normalmente se usa el Bloc de notas en Windows y TextEdit en Mac. Sigue estos pasos para abrir el programa:
  2. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/1\/12\/Create-a-Table-in-HTML-Step-2.jpg\/v4-460px-Create-a-Table-in-HTML-Step-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/1\/12\/Create-a-Table-in-HTML-Step-2.jpg\/v4-728px-Create-a-Table-in-HTML-Step-2.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    La etiqueta <table> indica el inicio de una tabla. Al presionar ↵ Enter tu editor de texto iniciará una nueva línea.
    • Al usar HTML, siempre hay que presionar ↵ Enter después de crear una línea de código para desplazarse a la siguiente.
  3. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/8\/8c\/Create-a-Table-in-HTML-Step-3.jpg\/v4-460px-Create-a-Table-in-HTML-Step-3.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/8\/8c\/Create-a-Table-in-HTML-Step-3.jpg\/v4-728px-Create-a-Table-in-HTML-Step-3.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Este comando sirve para crear un elemento específico de la tabla.
  4. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/4\/42\/Create-a-Table-in-HTML-Step-4.jpg\/v4-460px-Create-a-Table-in-HTML-Step-4.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/4\/42\/Create-a-Table-in-HTML-Step-4.jpg\/v4-728px-Create-a-Table-in-HTML-Step-4.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Escribe <th> para crear una columna, luego escribe la etiqueta de la columna, luego </th> para cerrarla y finalmente ↵ Enter .
    • Por ejemplo: para crear una columna en la tabla con la etiqueta "Cantidad de perros", deberás escribir <th>Cantidad de perros</th> en el editor de texto.
  5. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/8\/88\/Create-a-Table-in-HTML-Step-5.jpg\/v4-460px-Create-a-Table-in-HTML-Step-5.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/8\/88\/Create-a-Table-in-HTML-Step-5.jpg\/v4-728px-Create-a-Table-in-HTML-Step-5.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Este paso varía dependiendo de cuántas columnas quieras que tenga la tabla. Una vez que hayas agregado todas las columnas que quieras, continúa con el próximo paso.
    • Las columnas se crean de izquierda a derecha.
  6. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/6\/6a\/Create-a-Table-in-HTML-Step-6.jpg\/v4-460px-Create-a-Table-in-HTML-Step-6.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/6\/6a\/Create-a-Table-in-HTML-Step-6.jpg\/v4-728px-Create-a-Table-in-HTML-Step-6.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Este comando sirve para indicar que se han creado todas las columnas y para cerrar esa sección de código de la tabla.
  7. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/d\/d8\/Create-a-Table-in-HTML-Step-7.jpg\/v4-460px-Create-a-Table-in-HTML-Step-7.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/d\/d8\/Create-a-Table-in-HTML-Step-7.jpg\/v4-728px-Create-a-Table-in-HTML-Step-7.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Ahora le agregarás las filas a la tabla.
  8. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/4\/45\/Create-a-Table-in-HTML-Step-8.jpg\/v4-460px-Create-a-Table-in-HTML-Step-8.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/4\/45\/Create-a-Table-in-HTML-Step-8.jpg\/v4-728px-Create-a-Table-in-HTML-Step-8.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Escribe <td> para agregar información debajo de la primera columna, escribe la información, agrega </td> para cerrar la celda y presiona ↵ Enter .
    • Por ejemplo, para crear una celda con el número "23", deberás escribir <td>23</td> en tu editor de texto.
  9. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/0\/08\/Create-a-Table-in-HTML-Step-9.jpg\/v4-460px-Create-a-Table-in-HTML-Step-9.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/0\/08\/Create-a-Table-in-HTML-Step-9.jpg\/v4-728px-Create-a-Table-in-HTML-Step-9.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    La cantidad de celdas de la fila deberá estar relacionada con la cantidad de columnas. Por ejemplo, si tienes tres columnas, deberás tener tres celdas en cada fila. Una vez que hayas creado toda una fila, podrás continuar.
  10. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/1\/1f\/Create-a-Table-in-HTML-Step-10.jpg\/v4-460px-Create-a-Table-in-HTML-Step-10.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/1\/1f\/Create-a-Table-in-HTML-Step-10.jpg\/v4-728px-Create-a-Table-in-HTML-Step-10.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Escribe </tr> y presiona ↵ Enter para cerrar la fila. Ahora puedes abrir una nueva fila escribiendo <tr> y presionando ↵ Enter . Luego agrega nuevas celdas individuales y cierra la fila.
  11. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/1\/1b\/Create-a-Table-in-HTML-Step-11.jpg\/v4-460px-Create-a-Table-in-HTML-Step-11.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/1\/1b\/Create-a-Table-in-HTML-Step-11.jpg\/v4-728px-Create-a-Table-in-HTML-Step-11.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Debajo de la última línea de la tabla, escribe </table> . Así indicarás que ahí finaliza la tabla.
  12. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/4\/4a\/Create-a-Table-in-HTML-Step-12.jpg\/v4-460px-Create-a-Table-in-HTML-Step-12.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/4\/4a\/Create-a-Table-in-HTML-Step-12.jpg\/v4-728px-Create-a-Table-in-HTML-Step-12.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    El código de tu tabla ahora deberá parecido al siguiente: [1]
    • <table>
    • <tr>
    • <th>Día</th>
    • <th>Mes</th>
    • <th>Año</th>
    • </tr>
    • <tr>
    • <td>4</td>
    • <td>Marzo</td>
    • <td>1990</td>
    • </tr>
    • <tr>
    • <td>27</td>
    • <td>Julio</td>
    • <td>1993</td>
    • </tr>
    • </table>
  13. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/5\/5f\/Create-a-Table-in-HTML-Step-13.jpg\/v4-460px-Create-a-Table-in-HTML-Step-13.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/5\/5f\/Create-a-Table-in-HTML-Step-13.jpg\/v4-728px-Create-a-Table-in-HTML-Step-13.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Presiona Ctrl + S (Windows) o Comando + S (Mac) para guardar el documento, escribe un nombre y haz clic en Guardar para confirmar.
    Anuncio
Parte 2
Parte 2 de 2:

Agregar modificadores a la tabla

PDF download Descargar el PDF
  1. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/4\/4f\/Create-a-Table-in-HTML-Step-14.jpg\/v4-460px-Create-a-Table-in-HTML-Step-14.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/4\/4f\/Create-a-Table-in-HTML-Step-14.jpg\/v4-728px-Create-a-Table-in-HTML-Step-14.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Reemplaza la etiqueta <tabla> en la parte superior de la hoja por <table y luego escribe style="width:100%"> dentro de la etiqueta. Asegúrate de poner un espacio entre "table" y "style".
    • El resultado final deberá ser similar a: <table style="width:100%"> .
    • Puedes probar con otros porcentajes. Por ejemplo, si escribes 50 en lugar de 100 , reducirás el ancho de tu tabla a la mitad.
  2. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/6\/65\/Create-a-Table-in-HTML-Step-15.jpg\/v4-460px-Create-a-Table-in-HTML-Step-15.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/6\/65\/Create-a-Table-in-HTML-Step-15.jpg\/v4-728px-Create-a-Table-in-HTML-Step-15.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Agrega un espacio en la parte superior del documento, arriba de la etiqueta <table> y luego haz lo siguiente:
    • Escribe <style> y presiona ↵ Enter .
    • Escribe table, th, td { y presiona ↵ Enter .
    • Escribe border: 1px solid black; y presiona ↵ Enter .
    • Escribe border-collapse: collapse; y presiona ↵ Enter . Si quieres que los bordes tengan dos líneas en lugar de una, entonces salta este paso.
    • Escribe } y presiona ↵ Enter .
    • Escribe </style> y presiona ↵ Enter .
  3. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/f\/fe\/Create-a-Table-in-HTML-Step-16.jpg\/v4-460px-Create-a-Table-in-HTML-Step-16.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/f\/fe\/Create-a-Table-in-HTML-Step-16.jpg\/v4-728px-Create-a-Table-in-HTML-Step-16.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Crea un espacio justo debajo de la etiqueta <table> y luego haz lo siguiente:
    • Escribe <caption> .
    • Escribe el texto que quieras poner (por ejemplo, Cumpleaños ).
    • Escribe </caption> y presiona ↵ Enter .
      • El resultado final debe quedar así: <caption>Cumpleaños</caption> .
    Anuncio

Consejos

  • Es mejor usar sangría en las secciones de código relacionadas para poder diferenciarlas más fácilmente. Por ejemplo, puedes agregarle una sangría a toda una sección de celdas.
  • Para escribir un texto en negrita, agrega las etiquetas <b></b> alrededor del texto en cuestión. Por ejemplo, para cambiar "Cantidad de años" por "Cantidad de años" , escribe <b>Cantidad de años</b> en el editor de texto.
Anuncio

Advertencias

  • Recuerda cerrar siempre los comandos.
Anuncio

wikiHows relacionados

4 formas de agregar un enlace a una imagen
Cómo
hacer una página web en HTML
Cómo
establecer el color de fondo en HTML
Cómo
insertar espacios en HTML
Cómo
ejecutar un archivo HTML en Visual Studio Code
Cómo
cambiar el color de botón en HTML
Cómo
crear una calculadora usando HTML
Cómo crear una línea horizontal en HTML
Cómo
editar archivos HTML
Cómo
centrar una imagen en HTML
Cómo
insertar imágenes con HTML
Cómo
crear un enlace de correo electrónico en HTML
Cómo
hackear una página web con HTML
Cómo
hacer que el texto parpadee en HTML
Anuncio

Referencias

  1. ↑ https://www.w3schools.com/html/html_tables.asp

Acerca de este wikiHow

En otros idiomas
Esta página ha recibido 34 400 visitas.

¿Te ayudó este artículo?

Anuncio