1. Con una cuenta podrás:

    • Publicar preguntas y pedir ayuda
    • Crear tutoriales
    • Acceder a contenido privado
    • Convertirte en un Héroe de la web
    Cerrar notificación
  2. Eres nuevo en la comunidad y necesitas ayuda?
    Sigue estos pasos y recomendaciones antes de publicar tu duda:
    Cerrar notificación

Tutorial Como hacer una tabla sencilla en HTML

Tema en 'Tutoriales de HTML y CSS' comenzado por Skorge, 7 de Enero de 2015.

  1. Skorge

    Skorge Miembro

    Se incorporó:
    7 de Enero de 2015
    Mensajes:
    35
    Me gusta recibidos:
    16
    Puntos de trofeos:
    8
    Género:
    Hombre
    Página web:
    Hola chicos!, les enseñaré en este post a como hacer una tabla sencilla en HTML que ya después podrán darle un bonito diseño con CSS, así que empezamos!.

    1. Abrimos nuestro editor de texto, en este caso yo uso notepad++
    2. Establecemos el lenguaje desde el menú de arriba
    [​IMG]
    3. Utilizaremos las siguientes etiquetas:
    Código (Text):
     <table>
     <thead>
     <tr>
     <th>
     <td>
     <tbody>
    Tomando en cuenta sus correspondientes terminaciones.
    4. Usaremos la etiqueta <table> para referirnos a que crearemos una tabla. La etiqueta <thead> para el encabezado de la tabla. La etiqueta <tr> para indicar que crearemos una fila en una tabla. La etiqueta <th> para crear la celda del encabezado de la tabla. En pocas palabras, estas 4 etiquetas van de la mano.
    Las siguientes etiquetas son para referirse a las celdas de una tabla: La etiqueta <tbody> es para referirnos al cuerpo de la tabla. La etiqueta <td> para crear una celda de datos en el cuerpo de la tabla.

    Entonces, entendido esto, vamos a crearla!.

    1. Empezamos colocando la etiqueta <table> para indicar que estamos creando una tabla. Posteriormente, damos un Enter y colocamos la siguiente etiqueta que sería <thead> para crear el encabezado de la tabla. Quedaría algo así:
    Código (Text):

    <table>
        <thead>
     
    Ahora pasaremos a crear la fila del encabezado con la etiqueta <tr>. Una vez hecho esto, damos nuevamente un Enter y pasamos a crear la celda poniendo la etiqueta <th> y por consiguiente el texto que tendrá la celda. Un ejemplo sería así:
    Código (Text):

    <table>
      <thead>
       <tr>
        <th>Numero</th>
        <th>Nombre</th>
        <th>Telefono</th>
       </tr>
      </thead>
     
    Espero que sea claro, sino, pueden preguntar :D

    Posteriormente, empezamos con el cuerpo de la tabla usando la etiqueta <tbody>, y usamos nuevamente la etiqueta <tr> para crear la fila de las celdas y luego la etiqueta <td> para la celda, y en seguida el texto a poner. Quedaría así:
    Código (Text):

      <tbody>
       <tr>
        <td>1</td>
        <td>Mauricio</td>
        <td>01-800-CUCURUCHO</td>
       </tr>
      </tbody>
     
    Pueden repetir la secuencia y quedar así:
    Código (Text):

      <tbody>
       <tr>
        <td>1</td>
        <td>Mauricio</td>
        <td>01-800-CUCURUCHO</td>
       </tr>

       <tr>
        <td>2</td>
        <td>Cornet</td>
        <td>01-800-CORNET</td>
       </tr>
      </tbody>
     
    Y así tendremos 2 filas con diferentes datos.
    Uniendo ambas partes quedaría de la siguiente manera:
    Código (Text):

    <table>
      <thead>
       <tr>
        <th>Numero</th>
        <th>Nombre</th>
        <th>Telefono</th>
       </tr>
      </thead>

      <tbody>
       <tr>
        <td>1</td>
        <td>Mauricio</td>
        <td>01-800-000</td>
       </tr>

       <tr>
        <td>2</td>
        <td>Cornet</td>
        <td>01-800-000</td>
       </tr>
      </tbody>
    </table>
     
    Y el resultado es este:
    [​IMG]

    Le falta únicamente un bonito diseño con CSS pero eso ya es en otra ocasión ^^
    Espero les haya sido de ayuda y lo puedan utilizar en algún futuro proyecto :cool:

    Yo fui Skorge y hasta otra ;)
     
    A griselcesar y Drakz les gusta esto.
  2. Aldo

    Aldo Nuevo Miembro

    Se incorporó:
    7 de Enero de 2015
    Mensajes:
    20
    Me gusta recibidos:
    8
    Puntos de trofeos:
    3
    Género:
    Hombre
    Boy aprendido mas
     
  3. FalconMasters

    FalconMasters
    Administrador
    Miembro del Equipo

    Se incorporó:
    6 de Enero de 2015
    Mensajes:
    393
    Me gusta recibidos:
    331
    Puntos de trofeos:
    63
    Género:
    Hombre
    Ocupación:
    Diseñador Web
    Página web:
    Muchas gracias por el aporte, aunque no lo creas las únicas etiquetas que nunca me pude aprender en la vida son las de las tablas, pondré este post a la mano para recordarlas.
    PD: Alomejor le puedes agregar algo de letras en bold y colores al post, se vería genial
     
  4. Skorge

    Skorge Miembro

    Se incorporó:
    7 de Enero de 2015
    Mensajes:
    35
    Me gusta recibidos:
    16
    Puntos de trofeos:
    8
    Género:
    Hombre
    Página web:
    Y espero que sigas aprendiendo mucho más al igual que todos nosotros :D
     
  5. Skorge

    Skorge Miembro

    Se incorporó:
    7 de Enero de 2015
    Mensajes:
    35
    Me gusta recibidos:
    16
    Puntos de trofeos:
    8
    Género:
    Hombre
    Página web:
    jajaja en serio?, yo no las entendía pero encontré una página en el que explicaba para que servia cada una y solo fui improvisando hasta llegar a esto ^^ Esta es la página por si quieres verla: http://www.virtualnauta.com/html-etiquetas
    PD: Iba a poner colores y demás pero se me olvidó xd
     
    A FalconMasters le gusta esto.
  6. griselcesar

    griselcesar Miembro Activo

    Se incorporó:
    8 de Enero de 2015
    Mensajes:
    135
    Me gusta recibidos:
    61
    Puntos de trofeos:
    28
    Género:
    Hombre
    Ocupación:
    Estudiante
    Localización:
    Venezuela
    Página web:
    Excelente aporte, las tablas en html son enrolladas... Gracias...
     
    A Skorge le gusta esto.
  7. Ivis Retuerto

    Ivis Retuerto Nuevo Miembro

    Se incorporó:
    30 de Marzo de 2015
    Mensajes:
    1
    Me gusta recibidos:
    0
    Puntos de trofeos:
    0
    Género:
    Hombre
    MUY BUEN APORTE Y MUY CLARO, EXCELANTE. GRACIAS
     
  8. Erlien88

    Erlien88 Nuevo Miembro

    Se incorporó:
    15 de Mayo de 2015
    Mensajes:
    2
    Me gusta recibidos:
    0
    Puntos de trofeos:
    1
    Género:
    Hombre
    Como se puede cargar esa tabla desde una base de datos sql. Saludos
     

Comparte esta página