Miércoles, 13 Diciembre 2017

FSC Emergencia Nacional: Problema y posibilidad
El Instituto de Estudios Social Cristiano, organizó su Encuentro Nacional 2017: Camino a la visita del Papa Francisco al Perú. Formación de Líderes en la Doctrina Social de la Iglesia desde la Encíclica Laudato Si, que tuvo lugar en la Casa Belén, en la ciudad de Lima, del viernes 10 al domingo 12 de noviembre.
FSC: Lucha contra la corrupción, hacia un nuevo Sistema Nacional de Control en el Perú (Izq. a der.) Francisco Belaunde, Isabel Manrique, Nelson Shack, Armando Borda, Eduardo Vega.

Default styles

For basic styling—light padding and only horizontal dividers—add the base class .table to any <table>.

#First NameLast NameUsername
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
  1. <table class="table">
  2. </table>

Optional classes

Add any of the follow classes to the .table base class.

.table-striped

Adds zebra-striping to any table row within the <tbody> via the :nth-child CSS selector (not available in IE7-IE8).

#First NameLast NameUsername
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
  1. <table class="table table-striped">
  2. </table>

.table-bordered

Add borders and rounded corners to the table.

#First NameLast NameUsername
1 Mark Otto @mdo
Mark Otto @TwBootstrap
2 Jacob Thornton @fat
3 Larry the Bird @twitter
  1. <table class="table table-bordered">
  2. </table>

.table-hover

Enable a hover state on table rows within a <tbody>.

#First NameLast NameUsername
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
  1. <table class="table table-hover">
  2. </table>

.table-condensed

Makes tables more compact by cutting cell padding in half.

#First NameLast NameUsername
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
  1. <table class="table table-condensed">
  2. </table>

Optional row classes

Use contextual classes to color table rows.

ClassDescription
.success Indicates a successful or positive action.
.error Indicates a dangerous or potentially negative action.
.warning Indicates a warning that might need attention.
.info Used as an alternative to the default styles.
#ProductPayment TakenStatus
1 TB - Monthly 01/04/2012 Approved
2 TB - Monthly 02/04/2012 Declined
3 TB - Monthly 03/04/2012 Pending
4 TB - Monthly 04/04/2012 Call in to confirm
  1. ...
  2.  <tr class="success">
  3.  <td>1</td>
  4. <td>TB - Monthly</td>
  5.  <td>01/04/2012</td>
  6. <td>Approved</td>
  7.  </tr>
  8. ...

Supported table markup

List of supported table HTML elements and how they should be used.

TagDescription
<table> Wrapping element for displaying data in a tabular format
<thead> Container element for table header rows (<tr>) to label table columns
<tbody> Container element for table rows (<tr>) in the body of the table
<tr> Container element for a set of table cells (<td> or <th>) that appears on a single row
<td> Default table cell
<th> Special table cell for column (or row, depending on scope and placement) labels
Must be used within a <thead>
<caption> Description or summary of what the table holds, especially useful for screen readers
  1. <table>
  2.  <caption>...</caption>
  3.  <thead>
  4.  <tr>
  5.  <th>...</th>
  6.  <th>...</th>
  7.  </tr>
  8.  </thead>
  9.  <tbody>
  10.  <tr>
  11.  <td>...</td>
  12.  <td>...</td>
  13.  </tr>
  14.  </tbody>
  15. </table>