Se puede profundizar en la edición del estilo de una tabla modificando su código HTML. A lo largo de esta entrada veremos conceptos básicos que se pueden utilizar en las tablas de PoliformaT.


Para los ejemplos utilizaremos la siguiente tabla:



El código HTML es el siguiente:

<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>
		<tr>
			<th scope="row">Fila 3</th>
			<td>Celda 04</td>
			<td>Celda 05</td>
			<td>Celda 06</td>
		</tr>
		<tr>
			<th scope="row">Fila 4</th>
			<td>Celda 07</td>
			<td>Celda 08</td>
			<td>Celda 09</td>
		</tr>
	</tbody>
</table>
</div>




Para acceder a la edición HTML de una tabla seguiremos los siguientes pasos:


Existiendo una tabla en el editor de texto, pulsaremos sobre "Fuente HTML".



Veremos el código de la tabla. Si existe más contenido escrito, veremos el código de todo, pero nos vamos a centrar únicamente con el código de la tabla que queremos personalizar. El formato debe ser algo parecido, una etiqueta <table> </table> englobada dentro de la etiqueta <div class="table-responsive"> </div>.





Como podrás notar o ya conocerás, HTML se organiza por etiquetas, las cuales están constituidas al inicio y al final por los signos < y >, que representan precisamente la apertura y el cierre de cada elemento para que el lenguaje HTML pueda funcionar. Las etiquetas más utlizadas en una tabla son las siguientes:


EtiquetasDescripción
<table>Definición de una tabla.
<th>

Definición de cabecera de tabla.

El atributo scope que aparece en el ejemplo no es necesario utilizarlo.


<tr>Define una fila en la tabla.
<td>Define una celda en la tabla.
<caption>Define el nombre o título de la tabla.
<colgroup>Especifica un grupo de una o más columnas para aplicar formato.
<col>Especifica las propiedades de una columna de las columnas definidas en un elemento colgroup.
<thead>Define la cabecera de la tabla.
<tbody>Define el cuerpo de la tabla.
<tfoot>Define el pie de la tabla.





Si observamos la estructura de la tabla de ejemplo, vemos como se configuran filas <tr> </tr> y, dentro de cada fila, se configuran las celdas (ya sean cabecera <th> </th> o normales <td> </td>).







Vamos a aprender a realizar las siguientes acciones mediante código HTML:







COMBINAR COLUMNAS

Sin conocimientos previos de HTML, es más sencillo utilizar las propiedades que nos ofrece el editor de texto de PoliformaT. Acceda al siguiente enlace para más información: Cómo combinar celdas de una tabla.

Uno de los atributos que se pueden aplicar a las etiquetas de celda, independientemente que sean de encabezado o normales, es el atributo colspan, el cual permite realizar la combinación de varias columnas en una sola. Para especificar el valor del atributo, se ha de indicar el número de columnas sobre las que se quiere realizar la combinación, utilizando un valor numérico encerrado entre comillas dobles. Veámoslo con un ejemplo:


Hacemos los siguientes cambios en nuestro código HTML de ejemplo:



		<tr>
			<th scope="row">Fila 2</th>
			<td>Celda 01</td>
			<td>Celda 02</td>
			<td>Celda 03</td>
		</tr>




		<tr>
			<th scope="row">Fila 2</th>
			<td colspan="2">Celda 01 y 02</td>
			<td>Celda 03</td>
		</tr>














COMBINAR FILAS

Sin conocimientos previos de HTML, es más sencillo utilizar las propiedades que nos ofrece el editor de texto de PoliformaT. Acceda al siguiente enlace para más información: Cómo combinar celdas de una tabla.

Al igual que se puede realizar la combinación de columnas, también se puede realizar la combinación de filas, mediante el atributo rowspan. Para especificar el valor del atributo, se ha de indicar el número de filas sobre las que se quiere realizar la combinación, utilizando un valor numérico encerrado entre comillas dobles. Veámoslo con un ejemplo:


Hacemos los siguientes cambios en nuestro código HTML de ejemplo:



 		<tr>
			<th scope="row">Fila 2</th>
			<td>Celda 01</td>
			<td>Celda 02</td>
			<td>Celda 03</td>
		</tr>
		<tr>
			<th scope="row">Fila 3</th>
			<td>Celda 04</td>
			<td>Celda 05</td>
			<td>Celda 06</td>
		</tr> 




 		<tr>
			<th scope="row">Fila 2</th>
			<td rowspan="2">Celda 01 y 04</td>
			<td>Celda 02</td>
			<td>Celda 03</td>
		</tr>
		<tr>
			<th scope="row">Fila 3</th>
			<td>Celda 05</td>
			<td>Celda 06</td>
		</tr>














CAMBIAR ANCHO DE COLUMNA

Se pueden realizar agrupaciones de columnas para aplicar un formato por separado o en común a las mismas, para realizar estas agrupaciones se ha de utilizar la etiqueta <colgroup>, especificando a continuación como su contenido y mediante la etiqueta <col>, las columnas y el ámbito de las mismas sobre el cual se quiere aplicar el formato. Si nuestra tabla tiene 3 columnas, mediante estas etiquetas podremos configurar, por ejemplo, los anchos de cada una de las columna. El ancho de una columna se define mediante el atributo style con el subatributo width en el interior con el valor numérico del ancho entre comillas. Para que el contenido se adapte a todo tipo de pantallas, se recomienda que los anchos se definan en porcentaje. Veámoslo con un ejemplo:


Hacemos los siguientes cambios en nuestro código HTML de ejemplo:



<div class="table-responsive">
<table class="table table-bordered table-condensed
table-hover table-striped" style="width:100.0%">
	<thead>




<div class="table-responsive">
<table class="table table-bordered table-condensed
table-hover table-striped" style="width:100.0%">
	<colgroup>
		<col style="width: 30%"/>
		<col style="width: 17.5%"/>
		<col style="width: 17.5%"/>
		<col style="width: 17.5%"/>
	</colgroup>
	<thead>














CAMBIAR ALTO DE FILA

También podemos modificar el alto de las filas. El alto de una fila se define mediante el atributo style con el subatributo height en el interior con el valor numérico del alto entre comillas. Veámoslo con un ejemplo:


Hacemos los siguientes cambios en nuestro código HTML de ejemplo:



		<tr>
			<th scope="row">Fila 2</th>
			<td>Celda 01</td>
			<td>Celda 02</td>
			<td>Celda 03</td>
		</tr>
		<tr>
			<th scope="row">Fila 3</th>
			<td>Celda 04</td>
			<td>Celda 05</td>
			<td>Celda 06</td>
		</tr>




		<tr style="height: 100px">
			<th scope="row">Fila 2</th>
			<td>Celda 01</td>
			<td>Celda 02</td>
			<td>Celda 03</td>
		</tr>
		<tr style="height: 50px">
			<th scope="row">Fila 3</th>
			<td>Celda 04</td>
			<td>Celda 05</td>
			<td>Celda 06</td>
		</tr>














SOMBREAR UN GRUPO DE CELDAS


Esta opción provoca que se pierda el formato "Tabla estilo cebra" y "Tabla dinámica" de las celdas seleccionadas.

Podemos sombrear una celda o un grupo de celdas 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 <td> o <th> de cada celda que queramos sombrear. Veámoslo con un ejemplo:


Hacemos los siguientes cambios en nuestro código HTML de ejemplo:



		<tr>
			<th scope="row">Fila 2</th>
			<td>Celda 01</td>
			<td>Celda 02</td>
			<td>Celda 03</td>
		</tr>




		<tr>
			<th scope="row">Fila 2</th>
			<td style="background-color: #FAEBD7">Celda 01</td>
			<td style="background-color: rgb(144, 238, 144)">Celda 02</td>
			<td>Celda 03</td>
		</tr>






Celda 01 sombreada con el color "antiquewhite" - #FAEBD7 - rgb(250, 235, 215). Celda 02 sombreada con el color "lightgreen" - #90EE90 - rgb(144, 238, 144).









SOMBREAR UN GRUPO DE FILAS


Esta opción provoca que se pierda el formato "Tabla estilo cebra" y "Tabla dinámica" de las filas seleccionadas.

Podemos sombrear una fila o un grupo de filas 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 <tr> de cada celda que queramos sombrear. Veámoslo con un ejemplo:


Hacemos los siguientes cambios en nuestro código HTML de ejemplo:



		<tr>
			<th scope="row">Fila 2</th>
			<td>Celda 01</td>
			<td>Celda 02</td>
			<td>Celda 03</td>
		</tr>
		<tr>
			<th scope="row">Fila 3</th>
			<td>Celda 04</td>
			<td>Celda 05</td>
			<td>Celda 06</td>
		</tr>




		<tr style="background-color: #FFA500">
			<th scope="row">Fila 2</th>
			<td>Celda 01</td>
			<td">Celda 02</td>
			<td>Celda 03</td>
		</tr>
		<tr style="background-color: rgb(255, 192, 203)">
			<th scope="row">Fila 3</th>
			<td>Celda 04</td>
			<td>Celda 05</td>
			<td>Celda 06</td>
		</tr>






Fila 2 sombreada con el color "orange" - #FFA500 - rgb(255, 165, 0). Fila 3 sombreada con el color "pink" - #FFC0CB - rgb(255, 192, 203).









SOMBREAR UN GRUPO DE COLUMNAS


Esta opción no se visualiza correctamente si "Tabla estilo cebra" está activada.

Podemos sombrear una columna o un grupo de columna 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 hará uso de la etiqueta <colgroup> vista más arriba. Veámoslo con un ejemplo:


Hacemos los siguientes cambios en nuestro código HTML de ejemplo:



<div class="table-responsive">
<table class="table table-bordered table-condensed
table-hover table-striped" style="width:100.0%">
    <thead>




<div class="table-responsive">
<table class="table table-bordered table-condensed
table-hover" style="width:100.0%">
    <colgroup>
        <col/>
        <col style="background-color: #FFFAF0"/>
        <col style="background-color: rgb(248, 248, 255)"/>
        <col/>
    </colgroup>
    <thead>






Columna 2 sombreada con el color "floralwhite" - #FFFAF0 - rgb(255, 250, 240). Columna 3 sombreada con el color "ghostwhite" - #F8F8FF - rgb(248, 248, 255). Opción "Tabla estilo cebra" desactivada.









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:



<div class="table-responsive">
<table class="table table-bordered table-condensed
table-hover table-striped" style="width:100.0%">
    <thead>




<div class="table-responsive">
<table class="table table-bordered table-condensed
table-hover" style="width:100.0%; background-color: #FFE4E1">
    <thead>






Tabla sombreada con el color "mistyrose" - #FFE4E1 - rgb(255, 250, 240). Opción "Tabla estilo cebra" desactivada.







<div class="table-responsive">
<table class="table table-bordered table-condensed
table-hover table-striped" style="width:100.0%">
    <thead>




<div class="table-responsive">
<table class="table table-bordered table-condensed
table-hover table-striped" style="width:100.0%; background-color: #FFE4E1">
    <thead>






Tabla sombreada con el color "mistyrose" - #FFE4E1 - rgb(255, 250, 240). Opción "Tabla estilo cebra" activada.









AÑADIR UN BORDE EXTERIOR

Podemos añadir un borde exterior que rodee la tabla entera indicándolo en el atributo style con el subatributo border en el interior con el color en código HTML o su código RGB (Tabla de colores), el ancho del borde y el tipo de borde. 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 ";".

El tipo de borde se refiere a cómo será la línea:

ValorDescripción

hidden

Oculto. Idéntico a none, salvo para conflictos con tablas.

dotted

Establece un borde basado en puntos.

dashed

Establece un borde basado en rayas (línea discontínua).

solid

Establece un borde sólido (línea contínua).

double

Establece un borde doble (dos líneas contínuas).

groove

Establece un borde biselado con luz desde arriba.

ridge

Establece un borde biselado con luz desde abajo. Opuesto a groove.

inset

Establece un borde con profundidad «hacia dentro».

outset

Establece un borde con profundidad «hacia fuera». Opuesto a inset.

Veámoslo con un ejemplo:


Hacemos los siguientes cambios en nuestro código HTML de ejemplo:



<div class="table-responsive">
<table class="table table-bordered table-condensed
table-hover table-striped" style="width:100.0%">
    <thead>




<div class="table-responsive">
<table class="table table-bordered table-condensed
table-hover table-striped"
style="width:100.0%; border: #FF4500 4px double">
	<thead>






Tabla rodeada con un borde color "orangered" - #FF4500 - rgb(255, 69, 0), 4px de ancho de borde, tipo de borde "double".









CAMBIAR LOS BORDES HORIZONTALES

Podemos cambiar los bordes horizontales de la tabla entera indicándolo en el atributo style con el subatributo border en el interior con el color en código HTML o su código RGB (Tabla de colores), el ancho del borde y el tipo de borde. Se definirá el estilo dentro de una etiqueta <style> </style>. El tipo de borde se refiere a cómo será la línea. Se han indicado más arriba que tipo existen. Se deberá mover la cabecera de la tabla al cuerpo de la tabla y usar un ancho mínimo de borde superior a 1px (si queremos usar un borde de ancho 1px, podemos poner 1.1px). Veámoslo con un ejemplo:


Hacemos los siguientes cambios en nuestro código HTML de ejemplo:



<div class="table-responsive">
<table class="table table-bordered table-condensed
table-hover table-striped" style="width:100.0%">
    <thead>




<style>
	table tr {
		border: #6A5ACD 2.0px dotted;
	}
</style>
<div class="table-responsive">
<table class="table table-bordered table-condensed
table-hover table-striped" style="width:100.0%">
    <thead>






Tabla rodeada con un borde color "slateblue" - #6A5ACD - rgb(106, 90, 205), 2px de ancho de borde, tipo de borde "dotted".







<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>




<style>
	table tr {
		border: #6A5ACD 2.0px dotted;
	}
</style>
<div class="table-responsive">
<table class="table table-bordered table-condensed
table-hover table-striped" style="width:100.0%">
	<tbody>
		<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>






Tabla rodeada con un borde color "slateblue" - #6A5ACD - rgb(106, 90, 205), 2px de ancho de borde, tipo de borde "dotted". Cabecera de tabla movida al cuerpo.









CAMBIAR LOS BORDES VERTICALES

Podemos cambiar los bordes verticales de la tabla entera indicándolo en el atributo style con el subatributo border en el interior con el color en código HTML o su código RGB (Tabla de colores), el ancho del borde y el tipo de borde. Se hará uso de la etiqueta <colgroup> vista más arriba. El tipo de borde se refiere a cómo será la línea. Se han indicado más arriba que tipo existen. Se deberá mover la cabecera de la tabla al cuerpo de la tabla y usar un ancho mínimo de borde superior a 1px (si queremos usar un borde de ancho 1px, podemos poner 1.1px). Veámoslo con un ejemplo:


Hacemos los siguientes cambios en nuestro código HTML de ejemplo:



<div class="table-responsive">
<table class="table table-bordered table-condensed
table-hover table-striped" style="width:100.0%">
    <thead>




<div class="table-responsive">
<table class="table table-bordered table-condensed
table-hover table-striped" style="width:100.0%">
    <colgroup>
        <col style="border: #FFFF00 2.0px solid"/>
        <col style="border: #FFFF00 2.0px solid"/>
        <col style="border: #FFFF00 2.0px solid"/>
        <col style="border: #FFFF00 2.0px solid"/>
    </colgroup>
    <thead>






Tabla rodeada con un borde color "yellow" - #FFFF00 - rgb(255, 255, 0), 2px de ancho de borde, tipo de borde "solid".









CAMBIAR LOS BORDES DE LA TABLA


Esta opción no funcionará si "Tabla con bordes" está activada.

Podemos cambiar los bordes de la tabla entera indicándolo en el atributo style con el subatributo border en el interior con el color en código HTML o su código RGB (Tabla de colores), el ancho del borde y el tipo de borde. Se definirá el estilo dentro de una etiqueta <style> </style>. El tipo de borde se refiere a cómo será la línea. Se han indicado más arriba que tipo existen. Se deberá mover la cabecera de la tabla al cuerpo de la tabla y usar un ancho mínimo de borde superior a 1px (si queremos usar un borde de ancho 1px, podemos poner 1.1px).Veámoslo con un ejemplo:


Hacemos los siguientes cambios en nuestro código HTML de ejemplo:



<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>




<style>
    table td, table th, table tr {
        border: #000000 1.1px solid;
    }
</style>
<div class="table-responsive">
<table class="table table-condensed
table-hover table-striped" style="width:100.0%">
    <tbody>
		<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>






Tabla rodeada con un borde color "black" - #000000 - rgb(0, 0, 0), 1.1px de ancho de borde, tipo de borde "solid". Cabecera movida al cuerpo. Opción "Tabla con bordes" desactivada.









CAMBIAR LOS BORDES DE UN GRUPO DE CELDAS


Esta opción no funcionará si "Tabla con bordes" está activada.

Podemos cambiar los bordes de una o varias celdas indicándolo en el atributo style con el subatributo border en el interior con el color en código HTML o su código RGB (Tabla de colores), el ancho del borde y el tipo de borde. Se pondrá dentro de la etiqueta <td> o <th> de cada celda que queramos cambiar el borde. El tipo de borde se refiere a cómo será la línea. Se han indicado más arriba que tipo existen. Se deberá mover la cabecera de la tabla al cuerpo de la tabla y usar un ancho mínimo de borde superior a 1px (si queremos usar un borde de ancho 1px, podemos poner 1.1px).Veámoslo con un ejemplo:


Hacemos los siguientes cambios en nuestro código HTML de ejemplo:



<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>




<table class="table 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 style="border: #6A5ACD 2.0px dotted;">Celda 01</td>
            <td style="border: #0000FF 5.0px solid;">Celda 02</td>
            <td>Celda 03</td>
        </tr>






Celda 01 sombreada con el color "slateblue" - #6A5ACD - rgb(106, 90, 205). Celda 02 sombreada con el color "blueblue" - #0000FF - rgb(0, 0, 255). Opción "Tabla con bordes" desactivada.







<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>




<table class="table table-condensed
table-hover table-striped" style="width:100.0%">
    <tbody>
        <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>    
        <tr>
            <th scope="row">Fila 2</th>
            <td style="border: #6A5ACD 2.0px dotted;">Celda 01</td>
            <td style="border: #0000FF 5.0px solid;">Celda 02</td>
            <td>Celda 03</td>
        </tr>






Celda 01 sombreada con el color "slateblue" - #6A5ACD - rgb(106, 90, 205). Celda 02 sombreada con el color "blueblue" - #0000FF - rgb(0, 0, 255). Cabecera movida al cuerpo. Opción "Tabla con bordes" desactivada.









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:

ValorDescripció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:



<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>




<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>






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).