Tablas en Bootstrap - academicos.azc.uam.mx

Tablas en Bootstrap
En esta práctica se utilizarán varias de las tablas que ofrece Bootstrap.
Se comenzará copiando el archivo index.html al directorio plantillas y renombrándolo como
tablas.html, se debe realizar el ajuste de las rutas para los estilos, archivos de javascript e imágenes.
Creando Tablas
Una tabla se declara entre las etiquetas <table> y </table>. Una tabla está formada por columnas y
filas, para declarar una fila se utiliza la etiqueta <tr> y </tr>. Mientras que cada columna de declara
con <th> y </th> para los encabezados y <td> y </td> para las columnas normales.
Dos de las etiquetas propias de Bootstrap para el manejo de tablas son:
<thead> y </thead> para contener la fila (y columnas) que son encabezado.
<tbody> y </tbody> para contener las filas (y columnas) que son parte del cuerpo de la tabla.
Todas las tablas en Bootstrap se definen con la clase “table”.
<table class="table">
<thead>
<tr>
<th>Columna 1</th>
<th>Columna 2</th>
<th>Columna 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>DATO 1_1</td>
<td>DATO 1_2</td>
<td>DATO 1_3</td>
</tr>
<tr>
<td>DATO 2_1</td>
<td>DATO 2_2</td>
<td>DATO 2_3</td>
</tr>
<tr>
<td>DATO 3_1</td>
<td>DATO 3_2</td>
<td>DATO 3_3</td>
</tr>
</tbody>
</table>
1
Tabla Sencilla
La tabla más sencilla que ofrece Bootstrap se declara solo con la clase “table”
<h1>Tabla Simple con Bootstrap</h1>
<table class="table">
<thead>
<tr>
<th>Columna 1</th>
<th>Columna 2</th>
<th>Columna 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>DATO 1_1</td>
<td>DATO 1_2</td>
<td>DATO 1_3</td>
</tr>
<tr>
<td>DATO 2_1</td>
<td>DATO 2_2</td>
<td>DATO 2_3</td>
</tr>
<tr>
<td>DATO 3_1</td>
<td>DATO 3_2</td>
<td>DATO 3_3</td>
</tr>
</tbody>
</table>
Tabla con Bordes
Para colocar un borde en todas las celdas, se ofrece la clase “table-bordered”, la cuál se colocará como
clase adicional al momento de declarar la tabla. Se copiará la tabla anterior y solo se agregará la nueva
clase.
<h1>Tabla con Borde con Bootstrap</h1>
<table class="table table-bordered">
Tabla con Sombreado de Filas pares y Nones
Bootstrap ofrece la clase adicional “table-striped” para colocar de distinto color las filas pares y las
filas impares.
Se copiará la tabla sencilla y solo se agregará la clase adicional en la declaración de la tabla.
2
<h1>Tabla Simple con Sombreado Par y Non Bootstrap</h1>
<table class="table table-striped">
Tabla con Filas que Resaltan al Pasar el Cursor
Para lograr éste efecto, Bootstrap ofrece la clase adicional “table-hover”, la cuál se agrega al momento
de la declaración de la tabla.
<h1>Tabla que se Resalta al Colocar el cursor Bootstrap</h1>
<table class="table table-hover">
3
Aplicando Estilos Propios a las Tablas
Si bien Bootstrap ofrece estilos suficientes para el manejo de tablas, es deseable modificar éstos estilos
para adecuarlos a las propias necesidades. Se creará un nuevo archivo llamado tablas.css en el
directorio css_propios.
Estilo propio de la Tabla Sencilla
Primero se le asignará un estilo propio a la tabla sencilla, se le cambiará el estilo a los encabezados
tablas.css
.tabla_sencilla th{
font-size:20px;
color: #640923;
}
También se le cambiará el borde al encabezado. Para esto es necesario hacer referencia a la clase thead
que proporciona Bootstrap y posteriormente a la fila y al encabezado.
tablas.css
.tabla_sencilla thead tr th{
border-bottom: 3px solid #640923;
}
Finalmente se le cambiará el color al borde superior de las celdas. Para ésto se hace referencia a la clase
tbody.
tablas.css
.tabla_sencilla tbody tr td{
border-top: 1px solid #640923;
}
Estilo propio de la Tabla con Bordes
Se le cambiará el color de borde a las filas para sustituir el asignado por Bootstrap.
tablas.css
.tabla_con_bordes tr{
border:2px solid #640923;
}
4
A los encabezados se les asignará un color de fondo y se les cambiará el color de la letra.
tablas.css
.tabla_con_bordes th{
background-color:#640923;
color:#FFFFFF;
text-align:center;
}
Finalmente se le colocará borde tanto a los encabezados como a las celdas comunes.
tablas.css
.tabla_con_bordes thead tr th{
border:2px solid #640923;
}
.tabla_con_bordes tbody tr td{
border:2px solid #640923;
}
Estilo propio de la Tabla con Filas Sombreadas
Se asignará un color a los encabezados
tablas.css
.tabla_par_non tr th{
font-size:20px;
color:#640923;
}
Posteriormente se cambiará el color de fondo y letra de las filas pares
tablas.css
.tabla_par_non tr:nth-child(even){
background: #EEEEEE;
}
.tabla_par_non tr:nth-child(even) td{
color: #000000;
}
Se realizará lo mismo para las filas nones
tablas.css
.tabla_par_non tr:nth-child(odd){
background: #FFFFFF;
}
.tabla_par_non tr:nth-child(odd) td{
color: #640923;
}
5
Estilo propio para las Filas que Resaltan
Se cambiará el color de los encabezados
.tabla_resaltada tr th{
font-size:20px;
color:#640923;
}
Se cambiará el color de fondo de la fila al pasar el cursor sobre ella para sustituir el que genera
Bootstrap.
.tabla_resaltada tbody tr:hover{
background-color: #640923;
}
También se cambiará el color de letra de las filas al pasar el cursor sobre la fila corresondiente
.tabla_resaltada tbody tr:hover td{
color: #FFFFFF;
}
Con ésto finaliza la práctica de Tablas con Bootstrap
6