¿Cómo crear un horario de tabla de tiempo usando HTML?

Posted on by Rudeus Greyrat

Una tabla es una disposición de filas y columnas. Cualquiera puede crear una tabla conociendo los conceptos básicos de HTML (lenguaje de marcado de hipertexto). Una tabla se define usando la etiqueta <table> en HTML.

Pasos para crear una tabla:

  1. Cree una etiqueta <html>.
  2. Cree una tabla usando las etiquetas <table></table>.
  3. Cree filas en la tabla usando <tr>Esta es la etiqueta de fila</tr>.
  4. Inserte los datos en filas usando las etiquetas <td> Table Data</td>.
  5. Cierre la etiqueta de la tabla. 
  6. Cierre la etiqueta html </html>.

Esta es la tabla de tiempo básica creada en HTML sin el uso de color de fuente y colores de fondo.

Ejemplo: 

html

<!DOCTYPE html>
<html>
 
<body>
    <h1>TIME TABLE</h1>
    <table border="5" cellspacing="0" align="center">
        <!--<caption>Timetable</caption>-->
        <tr>
            <td align="center" height="50"
                width="100"><br>
                <b>Day/Period</b></br>
            </td>
            <td align="center" height="50"
                width="100">
                <b>I<br>9:30-10:20</b>
            </td>
            <td align="center" height="50"
                width="100">
                <b>II<br>10:20-11:10</b>
            </td>
            <td align="center" height="50"
                width="100">
                <b>III<br>11:10-12:00</b>
            </td>
            <td align="center" height="50"
                width="100">
                <b>12:00-12:40</b>
            </td>
            <td align="center" height="50"
                width="100">
                <b>IV<br>12:40-1:30</b>
            </td>
            <td align="center" height="50"
                width="100">
                <b>V<br>1:30-2:20</b>
            </td>
            <td align="center" height="50"
                width="100">
                <b>VI<br>2:20-3:10</b>
            </td>
            <td align="center" height="50"
                width="100">
                <b>VII<br>3:10-4:00</b>
            </td>
        </tr>
        <tr>
            <td align="center" height="50">
                <b>Monday</b></td>
            <td align="center" height="50">Eng</td>
            <td align="center" height="50">Mat</td>
            <td align="center" height="50">Che</td>
            <td rowspan="6" align="center" height="50">
                <h2>L<br>U<br>N<br>C<br>H</h2>
            </td>
            <td colspan="3" align="center"
                height="50">LAB</td>
            <td align="center" height="50">Phy</td>
        </tr>
        <tr>
            <td align="center" height="50">
                <b>Tuesday</b>
            </td>
            <td colspan="3" align="center"
                height="50">LAB
            </td>
            <td align="center" height="50">Eng</td>
            <td align="center" height="50">Che</td>
            <td align="center" height="50">Mat</td>
            <td align="center" height="50">SPORTS</td>
        </tr>
        <tr>
            <td align="center" height="50">
                <b>Wednesday</b>
            </td>
            <td align="center" height="50">Mat</td>
            <td align="center" height="50">phy</td>
            <td align="center" height="50">Eng</td>
            <td align="center" height="50">Che</td>
            <td colspan="3" align="center"
                height="50">LIBRARY
            </td>
        </tr>
        <tr>
            <td align="center" height="50">
                <b>Thursday</b>
            </td>
            <td align="center" height="50">Phy</td>
            <td align="center" height="50">Eng</td>
            <td align="center" height="50">Che</td>
            <td colspan="3" align="center"
                height="50">LAB
            </td>
            <td align="center" height="50">Mat</td>
        </tr>
        <tr>
            <td align="center" height="50">
                <b>Friday</b>
            </td>
            <td colspan="3" align="center"
                height="50">LAB
            </td>
            <td align="center" height="50">Mat</td>
            <td align="center" height="50">Che</td>
            <td align="center" height="50">Eng</td>
            <td align="center" height="50">Phy</td>
        </tr>
        <tr>
            <td align="center" height="50">
                <b>Saturday</b>
            </td>
            <td align="center" height="50">Eng</td>
            <td align="center" height="50">Che</td>
            <td align="center" height="50">Mat</td>
            <td colspan="3" align="center"
                height="50">SEMINAR
            </td>
            <td align="center" height="50">SPORTS</td>
        </tr>
    </table>
</body>
 
</html>

Producción:

También podemos agregar los elementos de estilo, como el color de la fuente, el color de fondo, la imagen de fondo, etc. a la tabla de tiempo anterior. Los atributos que se pueden agregar a la tabla son:

  1. align: alinea a la izquierda, a la derecha y al centro.
  2. borde: establece el borde de una tabla (ancho del borde de la tabla)
  3. bgcolor: establece el color de fondo para una celda o tabla completa.
  4. colspan: establece el número de columnas que se van a abarcar.
  5. rowspan: establece el número de columnas que se abarcarán.
  6. cellspaceing: Crea espacio entre las celdas.
  7. cellpadding: Crea espacio dentro de las celdas.
  8. background: Establece el fondo de la tabla con una imagen.
  9. ancho: Establece el ancho de la tabla.
  10. altura: Establece la altura de la mesa.

HTML es la base de las páginas web, se utiliza para el desarrollo de páginas web mediante la estructuración de sitios web y aplicaciones web. Puede aprender HTML desde cero siguiendo este tutorial de HTML y ejemplos de HTML .

Publicación traducida automáticamente

Artículo escrito por greeshmanalla y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

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