oriolrius.cat

Des del 2000 compartiendo sobre…

Imprimir color de fons en una taula HTML

Reading time: 5 – 8 minutes

Com molts sabreu, sobretot els que ho heu intentat. Si tenim una pàgina web amb una taula que té algún color de fons o imatge al enviar-la a la impresora aquesta no s’imprimeix. Només és possible imprimir la lletra i el contorn de la taula. Doncs bé, alguna vegada es pot tenir la necessitat que això passi. Aquí és on comença el problema i on intento explicar la solució que em van donar l’Oriol i la Sara.

La idea és per exemple, tenir una taula tan simple com aquesta:

screen.png

Gràcies al següent codi HTML i CSS. Podriem tenir la vista anterior per pantalla i el color de fons blavós que es veu a la captura del final de l’article a l’imprimir:

<!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01 Transitional//EN' 'http://www.w3.org/TR/html4/loose.dtd'>
<html>
	<head>
		<title>PROVA</title>
		<style media='screen'>
		<!--
		body{font-family:arial,sans-serif; font-size:12px; text-align:left;}
		.marc tr td {border-width:1px; border-style:solid; border-color:#999999;}
		.capçalera {background-color:#ABAE8A; font-weight:bolder; text-align:center;}
		-->
		</style>
		<style media='print'>
		<!--
		body{font-family:arial,sans-serif; font-size:13px; text-align:left;}
		.marc tr td {border-width:1px; border-style:solid; border-color:#999999;}
		.capçalera {font-weight:bolder; text-align:center; font-size:11px;}
		table, td {margin: 0; padding: 0;}
		td {margin: 0; padding: 0;}
		div { border-bottom: 14px solid ; border-bottom-color:#ADCEF7;}
		span {display: block; margin-bottom:-14px; float:left;}
		-->
		</style>
	</head>
	<body>
		<table>
			<tr><td class='capçalera'>
				<div><span>TITULO</span></div>
			</td></tr>
			<tr><td >
				alsjfaljfaljflask
			</td></tr>
			<tr><td >
				Salñsjfalñjfdalñskf
			</td></tr>
		</table>
	</body>
</html>

Descarregar el codi.

La taula imprimida quedaria així:

print.png

Com podeu veure el que fa el codi CSS és jugar amb les cantonades de la taula que si que s’imprimeixen, llavors els dona el suficient gruix com perquè pintin tota la capçalera i finalment col·locant el text al damunt de les cantonades perquè doni la sensació que esta al seu lloc. Un gran eginy realment, llàstima que no hi hagi res més elegant per fer-ho.

2 thoughts on “Imprimir color de fons en una taula HTML

  1. Thank you, your article has benefited me a lot and helped me a lot. After reading carefully, I still have some doubts, would you like to help me solve it? I’ll be back often and follow up on this comment. thank you for your help.

  2. I agree with your point of view, your article has given me a lot of help and benefited me a lot. Thanks. Hope you continue to write such excellent articles.

Últimas entradas

Resumen 2023

Reading time: 14 – 22 minutes El 2023 comenzó con una sensación de renovación y optimismo. Tras un período marcado por la pandemia, este año se presentó como un lienzo en blanco, lleno de posibilidades y nuevas experiencias. Aunque el

Leer más »
Archivo