Tablas y listas – Duoc UC

Tabla

Título 1 Título 2

Info 1

info 1

Info 2

info 2

Info 3

info 3

<table class="table table-striped">
        <thead>
            <tr>
                <th scope="col" style="text-align: left;">Título 1</th>
                <th scope="col" style="text-align: left;">Título 2</th>
            </tr>
        </thead>
        <tbody>
            <!--fila-->
            <tr>
                <th scope="row" style="text-align: left;"><p>Info 1</p></th>
                <td>
                    <p>info 1</p>
                </td>
            </tr>
            <!--fila-->
            <tr>
                <th scope="row" style="text-align: left;"><p>Info 2</p></th>
                <td>
                    <p>info 2</p>
                </td>
            </tr>
            <!--fila-->
            <tr>
                <th scope="row" style="text-align: left;"><p>Info 3</p></th>
                <td>
                    <p>info 3</p>
                </td>
            </tr>
        </tbody>
    </table>

Lista espaciada con bullets

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<ul class="list pt-0">
       <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
       <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
       <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
       <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
   </ul>

Lista por defecto

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<ul class="pt-0">
       <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
       <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
       <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
       <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
   </ul>

Lista de descargables

Título de la descarga

Descargable 1
Descargable 2
Descargable 3

<section>
<div class="container-narrow pb-0">
<h3>Título de la descarga</h3>
<p>
    <a class="btn btn-link" role="button" href="#"><i class="mr-2" data-feather="download"></i>Descargable 1</a><br />
    <a class="btn btn-link" role="button" href="#"><i class="mr-2" data-feather="download"></i>Descargable 2</a><br />
    <a class="btn btn-link" role="button" href="#"><i class="mr-2" data-feather="download"></i>Descargable 3</a>
</p>
</div>
</section>