Cómo crear una tabla en HTML (con imágenes)

Thysteaches, cómo crear una tabla de información básica utilizando HTML, así como cómo agregar elementos útiles, como bordes a la tabla.

Pasos

Parte 1 de 2:

Creando una tabla

1. Abra un programa de edición de texto. Normalmente, usará Bloc de notas ++ en Windows y TextEdit en Mac. Para encontrar estos programas:

Ventanas - Abierto Comienzo

, tipo bloc en arranque, y haz clic Bloc en la parte superior de la ventana.

Mac - Abierto Destacar

, escribir textedit, y haz clic Textedit debajo del campo de búsqueda de foco.

Imagen titulada Crear una tabla en HTML Paso 2

2. Escribe y presiona ↵ entrar. THETAG indica el inicio de una tabla y presionando ↵ Enter solicita su editor de texto para iniciar una nueva línea.

Cuando se utiliza HTML, siempre tiene que presionar ↵ ingrese después de crear una línea de código para pasar a la siguiente línea.

Imagen titulada Crear una tabla en HTML Paso 3

3. Escribe y presiona ↵ entrar. Este comando indica que estará creando un elemento específico de la tabla.

Imagen titulada Crear una tabla en HTML Paso 4

4. Añadir una columna a su mesa. Escriba para indicar una columna, escriba la etiqueta para la columna, escriba para cerrar la columna y presione ↵ Entrar.

Por ejemplo: para crear una columna de tabla etiquetada "Número de perros", Usted escribiria Número de perros en su editor de texto.

Imagen titulada Crear una tabla en HTML Paso 5

5. Añadir más columnas. Dependiendo de la cantidad de columnas que desee que tenga su tabla, este paso variará. Una vez que haya agregado todas las columnas que desea usar, continúe con el siguiente paso.

Las columnas se crean de izquierda a derecha.

Imagen titulada Crear una tabla en HTML Paso 6

6. Escribe y presiona ↵ entrar. Este comando indica que todas las columnas de la tabla se han creado y cierra esa sección del código de la tabla.

Imagen titulada Crear una tabla en HTML Paso 7

7. Escriba nuevamente, luego presione ↵ entrar. Ahora agregarás tus filas a tu mesa.

Imagen titulada Crear una tabla en HTML Paso 8

8. Añadir una celda a su mesa. Escriba para indicar una pieza de información debajo de la primera columna, escriba la información, escriba para cerrar la celda y presione ↵ Entrar.

Por ejemplo: para crear una celda con el número "23" en ella, escribirías 23 en su editor de texto.

Imagen titulada Crear una tabla en HTML Paso 9

9. Añadir más celdas a su mesa. El número de células en una fila debe correlacionarse con el número de columnas, por ejemplo, si tiene tres columnas, debe tener tres celdas en una fila. Una vez que haya creado una fila completa, puede continuar.

Imagen titulada Crear una tabla en HTML Paso 10

10. Cerrar la fila actual. Escriba y presione ↵ ingrese para cerrar la fila. En este punto, puede abrir otra fila escribiendo y presionando ↵ Enter, agregando celdas individuales y luego cerrando la fila.

Imagen titulada Crear una tabla en HTML Paso 11

11. Cierra tu mesa. Debajo de la línea final de la tabla, escriba . Esto indica el final de la tabla.

Imagen titulada Crear una tabla en HTML Paso 12

12. Revisa tu tabla. Tu mesa debería mirar algo así:

Día

Mes

Año

marcha

1990

mes de julio

1993

Imagen titulada Crear una tabla en HTML Paso 13

13. Guarda tu trabajo. prensa control+S (Windows) o ⌘ comando+S (Mac) Para guardar su documento, ingrese un nombre para el documento y haga clic en Ahorrar Cuando se le solicite.

Parte 2 de 2:

Añadiendo modificadores de tabla

1. Amplia tu mesa. Reemplace el thetag en la parte superior de la hoja con y luego escribe estilo ="Ancho: 100%"> en la etiqueta. Asegúrate de mantener un espacio entre "mesa" y "estilo".

El resultado final debe parecer esto:
Puedes experimentar con el porcentaje. Por ejemplo, escribiendo en 50 en vez de 100 dará como resultado una tabla de medio asilo.

Imagen titulada Crear una tabla en HTML Paso 15

2. Crea bordes para tu mesa. Cree un espacio en la parte superior del documento anterior, luego haga lo siguiente:

Escriba y presione ↵ Entrar.

Escribir mesa, th, td { y presione ↵ entra.

Escribir Frontera: 1px negro sólido- y presione ↵ entra.

Escribir Frontera-colapso: colapso- y presione ↵ entra. Omita esta línea si desea que sus fronteras tengan dos líneas en lugar de uno.

Escribir } y presione ↵ entra.

Escriba y presione ↵ Entrar.

Imagen titulada Crear una tabla en HTML Paso 16

3. Añadir una etiqueta para su mesa. Cree un espacio justo debajo del THETAG, luego haga lo siguiente:

Escribir

Escriba el texto que desea usar (e.gramo., Cumpleaños)

Escriba y presione ↵ Entrar.

Tu resultado final debe parecerse a esto: Cumpleaños

Consejos

Ayuda a sangrar las secciones de código relacionadas para que pueda hacerle referirlas fácilmente más tarde. Por ejemplo, puede sangrar una sección completa de las celdas.

Para hacer ciertos textos en negrita, puede colocar etiquetas alrededor del texto en cuestión. Por ejemplo, para girar "Número de años" dentro "Número de años", Tipo Número de años en el editor de texto.

Advertencias

Siempre recuerda cerrar comandos.