Scribd Logo
Cargar

¡Te damos la bienvenida a Scribd!

  • 9 vistas

    Tarea 4 - LENGUAJE DE MARCAS-TABLAS

    Cargado por

    Kamu Sf

    Copyright:

    © All Rights Reserved
    Descargue como DOC, PDF, TXT o lea en línea desde Scribd

    Tarea 4 - LENGUAJE DE MARCAS-TABLAS

    Cargado por

    Kamu Sf
    9 vistas6 páginas

    Título original

    Tarea 4- LENGUAJE DE MARCAS-TABLAS

    Derechos de autor

    © © All Rights Reserved

    Formatos disponibles

    DOC, PDF, TXT o lea en línea desde Scribd

    ¿Le pareció útil este documento?

    ¿Este contenido es inapropiado?

    Copyright:

    © All Rights Reserved
    Descargue como DOC, PDF, TXT o lea en línea desde Scribd
    Descargar como doc, pdf o txt
    9 vistas6 páginas

    Tarea 4 - LENGUAJE DE MARCAS-TABLAS

    Cargado por

    Kamu Sf

    Copyright:

    © All Rights Reserved
    Descargue como DOC, PDF, TXT o lea en línea desde Scribd
    Descargar como doc, pdf o txt
    de 6

    FORMACION PROFESIONAL

    CARRERA

    1° GRADO SUPERIOR EN DAM Y DAW

    INFORME UNIDAD 2 – ACTIVIDAD 2

    CREACIÓN DE UNA PÁGINA WEB CON UNA TABLA DE INFORMACIÓN

    DOCENTE

    JESUS VILLARROYA

    CURSO

    LENGUAJE DE MARCAS

    ALUMNA

    SÁNCHEZ FUENTES, CARMEN MERCEDES

    2024
    INTRODUCCION
    Este código crea una tabla interactiva en una página web que permite
    ordenar los datos mediante botones y cuenta con un diseño personalizado
    mediante un archivo CSS externo. Además, el uso de etiquetas
    semánticas, metadatos y elementos como charset y viewport garantiza
    que la página sea accesible y responsiva.

    DETALLE DEL CODIGO ESCRITO HTML


    <!DOCTYPE html>

    <html lang="es">

    <head>

    <meta charset="UTF-8"> <!-- Define la codificación de caracteres


    utilizada -->

    <meta name="viewport" content="width=device-width, initial-


    scale=1.0"> <!-- Ajusta la página para que sea responsiva (se
    adapte a diferentes tamaños de pantalla) -->

    <link rel="stylesheet" href="tablas.css"> <!--Conecta tu archivo


    HTML con un archivo CSS externo -->

    <title>Tabla de Información</title> <!--Define el título que se


    mostrará en la pestaña del navegador-->

    </head>

    <body>

    <h1>Tabla de Información</h1> <!--Encabezado principal-->

    <!-- Botones para ordenar por nombre / edad -->

    <button class="btn" onclick="sortTable(0, 'string')">Ordenar por


    Nombre</button>

    <button class="btn" onclick="sortTable(1, 'number')">Ordenar por


    Edad</button>

    <table>

    <!--primera fila que define los títulos de las columnas -->

    <tr>

    <th>N°</th>

    <th>Nombre</th>

    <th>Edad</th>

    <th>Ciudad</th>

    <th>Comentarios</th>
    </tr>

    <tr class="tablas1">

    <!--class="tablas1": Asigna un estilo específico desde el archivo CSS-->

    <th>1</th>

    <td>Juan Pérez</td>

    <!--id="edad", id="ciudad", id="comentarios": el id permite identificar


    celdas de manera única.-->

    <td id="edad">30</td>

    <td id="ciudad">Madrid</td>

    <td id="comentarios" rowspan="2">Interesada en tecnología y desarrollo


    web.</td> <!--rowspan="2" : Permiten que una celda ocupe más de una fila
    , unificando celdas-->

    </tr>

    <tr class="tablas1">

    <th>2</th>

    <td colspan="2">Ana López</td>

    <td id="ciudad">Barcelona</td>

    </tr>

    <tr class="tablas1">

    <th>3</th>

    <td>María González</td>

    <td id="edad">25</td>

    <td id="ciudad">Sevilla</td>

    <td id="comentarios">Apasionada por el diseño gráfico y UX.</td>

    </tr>

    <tr class="tablas1">

    <th>4</th>

    <td>Pedro Ramírez</td>

    <td id="edad" rowspan="2">35</td>

    <td id="ciudad">Bilbao</td>
    <td id="comentarios" rowspan="2">Le encanta administración en redes
    informáticas.</td>

    </tr>

    <tr class="tablas1">

    <th>5</th>

    <td>Carlos Díaz</td>

    <td id="ciudad">Valencia</td>

    </tr>

    <tr class="tablas1">

    <th>6</th>

    <td>Pedro Ramírez</td>

    <td id="edad">48</td>

    <td id="ciudad" rowspan="2">Bilbao</td>

    <td id="comentarios" rowspan="2">Su pasión es la programación.</td>

    </tr>

    <tr class="tablas1">

    <th>7</th>

    <td>Alberto Ruiz</td>

    <td id="edad">50</td>

    </tr>

    <tr class="total-usuarios">

    <td colspan="3">Total Usuarios</td> <!--colspan="3" : Permiten que


    una celda ocupe más de una columna , unificando celdas-->

    <td>7</td>

    </tr>

    </table>

    </body>

    </html>

    DETALLE DEL CODIGO ESCRITO HTML


    table {
    width: 100%;

    border-collapse: collapse;

    /*estilos para las lineas de la tabla*/

    th, td {

    border: 1px solid #000000;

    padding: 8px;

    text-align: left;

    /*stilos para la primera línea de la tablas*/

    th {

    background-color: #dcabe0;

    text-align: center;

    /*stilos para titulo principal de la tabla*/

    h1 {

    background-color: #dcabe0;

    text-align: center;

    .total-usuarios {

    background-color: #e4ceeb; /* Color de fondo diferente */

    font-weight: bold; /* Texto en negrita */

    color: #000000; /* Color del texto */

    text-align: center; /* Centrar el contenido */

    .total-usuarios td {

    text-align: center; /* Centrar el contenido */

    .tablas1 th{
    background-color: #e4ceeb; /* Color de fondo diferente */

    #edad {

    text-align: center; /* Centrar el contenido */

    #ciudad {

    text-align: center; /* Centrar el contenido */

    #comentarios {

    text-align: center; /* Centrar el contenido */

    /* Estilos adicionales para los botones */

    .btn {

    margin: 10px;

    padding: 10px 20px;

    background-color: #007bff;

    color: #fff;

    border: none;

    border-radius: 5px;

    cursor: pointer;

    .btn:hover {

    background-color: #0056b3;

    También podría gustarte