Curso HTML: Usar tablas y comentarios



El uso de tablas en aplicaciones modernas ya no es tan común, pero siguen siendo muy útiles para presentar información como reportes o datos en forma tabular (tablas comunes). Por otro lado los comentarios son una parte oculta en todas las páginas web, pero que son de gran ayuda para las personas que diseñan dicha página. En este articulo te explicare todo esto.

Para crear una tabla, primero debemos agregar unas etiquetas <table> </table> luego para definir una fila, utilizamos etiquetas <tr> </tr> y ahora que tenemos la tabla y filas necesitamos columnas, estas se definen con etiquetas <td> </td> ahora veamos un pequeño ejemplo:

    <table>
      <tr>
        <td>A001</td>
        <td>Laptop</td>
        <td>1,000.00</td>
      </tr>       
    </table>

En el código anterior creamos una tabla, con una fila y tres columnas, como vemos, los datos que vamos a mostrar se ingresan dentro de las etiquetas <td> </td> 

Si creamos un archivo con extensión .html y colocamos el código anterior veremos algo como esto

Ejemplo de tablas HTML

Aún no parece ser una tabla ¿cierto?, no te preocupes, vamos a hacer algo que ya no se usa pero nos ayudará a ver mejor los resultados, vamos a agregar un atributo a la etiqueta <table>, en el código anterior reemplaza <table> por <table border=”1″>

Ejemplo de tabla HTML con bordes

Ahora veamos una etiqueta más, toda tabla contiene encabezados, para agregar un encabezado, primero creamos una fila con la etiqueta <tr> </tr> y para agregar la columnas usamos <th> </th> en lugar de <td> </td>

   <table border="1">
      <tr>
        <th>Código</th>
        <th>Descripción</th>
        <th>Precio</th>
      </tr>

      <tr>
        <td>A001</td>
        <td>Laptop</td>
        <td>1,000.00</td>
      </tr>       
    </table>
Ejemplo de tablas html con encabezados

Ahora veamos un ejemplo de codigo HTML, completo, por que aun te falta las etiquetas <head> y todo lo demas. Recuerda que todo el contenido visible en la ventaja del navegador, debe ir entre etiquetas <body> </body>

<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="utf-8">
    <title>Lista de productos</title>
    <link rel="icon" type="image/png" href="favicon.png" />
  </head>
  <body>
    <table border="1">
       <tr>
        <th>Código</th>
        <th>Descripción</th>
        <th>Precio</th>
      </tr>

      <tr>
        <td>A001</td>
        <td>Laptop</td>
        <td>1,000.00</td>
      </tr>       
    </table>
  </body>
</html>

Comentarios en HTML

Ahora vamos a ver un tema más… los comentarios. Estos no afectan en nada a una página web, simplemente nos ayudan a entender mejor el código HTML que vemos. Para agregar un comentario simplemente escribimos algún texto y lo rodeamos entre las etiquetas <!– y –>

Personalmente uso los comentarios para marcar en donde inicia un bloque y donde termina, por ejemplo cuando inicia el código para desplegar un menú. También los uso para agregar notas sobre por que hice algo, o algo que debe corregir más tarde.

   <!-- Tabla de productos de tecnologia -->
   <table border="1">
       <tr>
        <th>Código</th>
        <th>Descripción</th>
        <th>Precio</th>
      </tr>

      <tr>
        <td>A001</td>
        <td>Laptop</td>
        <td>1,000.00</td>
      </tr>       
    </table>

Elige tu siguiente tema

  1. Crea tu primera página web
  2. Cómo agregar un favicon (icono)
  3. Usar tablas y comentarios
  4. Uso de títulos y párrafos
  5. Trabajar con Listas
  6. Mostrar imágenes y rutas
  7. Enlaces o links a otras páginas web
  8. Formularios en páginas web
  9. Etiqueta textarea para ingresar textos grandes
  10. Mostrar listas desplegables
  11. Subir imágenes, números, emails, etc
Versión en video

Deja una respuesta

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