# Opciones html

Cuando vamos a diseñar un informe **cuya salida sea un fichero html**, el editor de informes personalizables tiene opciones para configurar estilos tanto generales al informe como específicos para controles.

En la **configuración del informe y página**, podemos establecer un estilo general para el cuerpo (\</body>) de la página html generada y establecer opciones para el encabezado (\</header>). Veamos un ejemplo:

![](https://content.gitbook.com/content/hGRTr5J3e6YsZ6MYIEDz/blobs/UftoZvjtHnxGvEIBZc5n/opciones_htm_inf_pers.png)

Estamos aplicando un estilo al cuerpo del html, que consiste en un borde de guiones verdes y de 5 píxels de ancho.

Y establecemos un atributo \_\<link> \_para la cabecera del html.

Así mismo, en las propiedades de un control podemos también aplicar un estilo html:

![](https://content.gitbook.com/content/hGRTr5J3e6YsZ6MYIEDz/blobs/iAClVmZYWQB9RHt0tWRM/html_control_informe_personalizable.png)

En este caso estamos asignando un borde punteado al control.

Al hacer la salida del informe a html, veremos que la página resultante aplica ambos estilos (el general y el del control):

![](https://content.gitbook.com/content/hGRTr5J3e6YsZ6MYIEDz/blobs/9KlPjRGOm5BZSpPF9lu9/informe_personalizable_html.png)

Y si editamos el código podremos comprobar cómo se han incluido en el código generado y también el link que habíamos establecido en la cabecera:

`<link rel="SHORTCUT ICON" href="info-26.png"/><style type="text/css">`

```
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//ENhttp://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta charset="UTF-8">
<title>Informe de ejemplo</title>
<link rel="SHORTCUT ICON" href="info-26.png"/><style type="text/css">
body{width:803px;font-family:Arial;font-size:10pt;margin-left:94px;margin-right:94px;margin-top:71px;margin-bottom:71px;border:5px dashed green;}
table.ncr{width:803px;border-spacing:3px;}
td.Detail2_item_BIX4Z{vertical-align:top;border:1px dotted green;width:255px;}
td.PH_item_30ROE{width:525px;vertical-align:top;font-size:28pt;}
div.textBIX4Z{width:255px;}

</style>
</head>
<body>
<!-- SECTION: PH -->
<div class="PH">
<table class="ncr section_PH">
<tr class="r_PH_odd"><td class="PH_item_30ROE">Informe de pruebas</td></tr>
</table>
</div>
<!-- SECTION: Detail2 -->
<div class="Detail2">
<table class="ncr section_Detail2">
<tr class="r_Detail2_odd"><td class="Detail2_item_BIX4Z"><div class="textBIX4Z">

<meta name="qrichtext" content="1" /><style type="text/css">
p, li { white-space: pre-wrap; }
</style><div style=" font-family:'MS Shell Dlg 2'; font-size:8.25pt; font-weight:400; font-style:normal;">
<p style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><span style=" font-size:x-large; font-weight:600;">Ejemplo de informe HTML: artículos</span></p>
<table border="0" style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px;" cellspacing="2" cellpadding="0">
<tr>
<td>
<p style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;">21</p></td>
<td>
<p style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;">Sir Rodney's Scones</p>
<p style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;">$ENDSCAN{} </p></td></tr></table></div>
</div>
</td></tr>
</table>
</div>
<!-- SECTION: PF -->
<div class="PF">
<table class="ncr section_PF">
<tr class="r_PF_odd"></tr>
</table>
</div>
</body>
</html>
```
