...
| Section |
|---|
| Sugerencia |
|---|
| SOMBREAR LA TABLA |
Podemos sombrear la tabla entera con el mismo color indicándolo en el atributo style con el subatributo background-color en el interior con el color en código HTML o su código RGB (Tabla de colores). Se pondrá dentro de la etiqueta <table>. El atributo style puede contener más de un subatributo, separando cada uno de ellos con un punto y coma ";". Veámoslo con un ejemplo:
Hacemos los siguientes cambios en nuestro código HTML de ejemplo: | Section |
|---|
| Column |
|---|
|
| Bloque de código |
|---|
| language | xml |
|---|
| title | Código original |
|---|
| <div class="table-responsive">
<table class="table table-bordered table-condensed
table-hover table-striped" style="width:100.0%">
<thead> |
|
| Column |
|---|
|
| Bloque de código |
|---|
| language | xml |
|---|
| title | Modificaciones |
|---|
| <div class="table-responsive">
<table class="table table-bordered table-condensed
table-hover" style="width:100.0%; background-color: #FFE4E1">
<thead> |
|
|
| Info |
|---|
| Tabla sombreada con el color "mistyrose" - #FFE4E1 - rgb(255, 250, 240).Columna 3 sombreada con el color "ghostwhite" - #F8F8FF - rgb(255, 228, 225). Opción Opción "Tabla estilo cebra" desactivada.
|
| Section |
|---|
| Column |
|---|
|
| Bloque de código |
|---|
| language | xml |
|---|
| title | Código original |
|---|
| <div class="table-responsive">
<table class="table table-bordered table-condensed
table-hover table-striped" style="width:100.0%">
<thead> |
|
| Column |
|---|
|
| Bloque de código |
|---|
| language | xml |
|---|
| title | Modificaciones |
|---|
| <div class="table-responsive">
<table class="table table-bordered table-condensed
table-hover table-striped" style="width:100.0%; background-color: #FFE4E1">
<thead> |
|
|
| Info |
|---|
| Tabla sombreada con el color "mistyrose" - #FFE4E1 - rgb(255, 250, 240). Columna 3 sombreada con el color "ghostwhite" - #F8F8FF - rgb(255, 228, 225). Opción "Tabla estilo cebra" activada.
|
|
...
| Section |
|---|
| Sugerencia |
|---|
| CAMBIAR LAS PROPIEDADES DE FUENTE |
Podemos cambiar las propiedades de fuente de una celda, una fila o una columna, un grupo de celdas, de filas o de columnas o de toda la tabla indicándolo en el atributo style con el subatributo font-style, color (con el color en código HTML o su código RGB (Tabla de colores) en el interior) y font-size con el tamaño indicado en pixeles. Se pondrá dentro de la etiqueta <td>, <th>, <tr> o <table> de cada celda que queramos sombrear. Los tipos de estilo de fuente que se puede definir mediante font-size son los siguientes: | Valor | Descripción |
|---|
normal | El navegador muestra un estilo de fuente normal. Esto es predeterminado. | italic | El navegador muestra un estilo de fuente en cursiva. | oblique | El navegador muestra un estilo de fuente oblicuo. |
Veámoslo con un ejemplo:
Hacemos los siguientes cambios en nuestro código HTML de ejemplo: | Section |
|---|
| Column |
|---|
|
| Bloque de código |
|---|
| language | xml |
|---|
| title | Código original |
|---|
| <div class="table-responsive">
<table class="table table-bordered table-condensed
table-hover table-striped" style="width:100.0%">
<thead>
<tr>
<th scope="row">F1, C1</th>
<th scope="col">Columna 2</th>
<th scope="col">Columna 3</th>
<th scope="col">Columna 4</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Fila 2</th>
<td>Celda 01</td>
<td>Celda 02</td>
<td>Celda 03</td>
</tr> |
|
| Column |
|---|
|
| Bloque de código |
|---|
| language | xml |
|---|
| title | Modificaciones |
|---|
| <div class="table-responsive">
<table class="table table-bordered table-condensed
table-hover table-striped"
style="width:100.0%; color: #5F9EA0">
<thead>
<tr>
<th scope="row">F1, C1</th>
<th scope="col">Columna 2</th>
<th scope="col">Columna 3</th>
<th scope="col">Columna 4</th>
</tr>
</thead>
<tbody>
<tr style="font-style: italic">
<th scope="row">Fila 2</th>
<td>Celda 01</td>
<td style="font-size: 25px;">Celda 02</td>
<td style="color: #FF7F50;">Celda 03</td>
</tr> |
|
|
| Info |
|---|
| Color de fuente de la tabla "cadetblue" - #5F9EA0 - rgb(95, 158, 160). Fila 2 en itálica. Celda 02 con tamaño de fuente 25px. Celda 03 con color de fuente de la tabla "coral" - #FF7F50 - rgb(255, 127, 80).
|
|
...
