Como crear tablas html con diseño bootstrap

1. Crea un archivo html para crear la tabla

ejemplo:

index.html

                    
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tablas</title>
</head>
<body>
    <table>
        <thead>
            <th>#</th>
            <th>Nombre</th>
            <th>Apellido</th>
            <th>Puesto</th>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>Jose</td>
                <td>Martinez</td>
                <td>Programador</td>
            </tr>
            <tr>
                <td>2</td>
                <td>Miguel</td>
                <td>Corona</td>
                <td>Electrico</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

2. Despues nos vamos al navegador web de tu preferencia y buscamos "bootsrap" y hacemos clic en la primera pagina: Bootstrap.

3. Copiamos la etiqueta link con el url de bootstrap para poder utilizarlo en nuestra hoja html.

4. El codigo a copiar es el siguiente:

Con el tiempo puede cambiar un poco por futuras versiones

                    
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">

3. Una vez copiado el codigo se incrustara dentro de la etiqueta head de nuestro html que creamos anteriormente.

Fragmento del codigo html con la etiqueta link ya pegada dentro de head

                    
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
    <title>Tablas</title>
</head>

4. Nos dirigimos nuevamente a la pagina de bootstrap y ahora nos vamos a la opcion de docs en el menu

5. Damos clic dentro de content a la opcion tables

6. Elegimos el diseño de tabla que mejor se adapte a nuestras necesidades. en este caso elejimos la presentada en la siguiente imagen.

7. esta clase (class="table table-hover") la agregamos en la etiqueta table de nuestro archivo html

index.html

                    
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tablas</title>
</head>
<body>
    <table class="table table-hover">
        ...
    </table>
</body>
</html>

8. Listo, ejecuta tu archivo html en el navegador y se mostrara el diseño aplicado

Descargar proyecto Tutorial youtube

MemoCode - HTML

MemoCode

Como crear tablas html con diseño bootstrap