+ MENY
2011 jan 5
3

Css tabell – Gör en produktjämförelse

Ett sätt att presentera ett bra material för en besökare på en blogg eller affiliatesajt är att göra en css – tabell med en produktjämförelse.  Här erbjuder jag lite länkar och kod för detta ändamål.

Css och html – Min Prisjämförelse

Här nedan kan du visuellt se dem produkt/pris- jämförelse som jag just nu använder mig av. Jag har snickrat ihop den själv med html kod och tillhörande css.
Viktigt! I det här exemplet använder jag html-taggen table och designar sedan tabellen med hjälp av css och css3 för tabellhuvudet. Vill du slippa att jobba med koden själv när du jobbar med wordpress så finns det wordpress plugin för tabeller, se längre ned i inlägget för sådana länkar. Så här kommer i alla fall min css-tabell att se ut när jag tillämpar koden.

Företag Erbjudande Pris Villkor Tänk På Call To Action
crazycow
Lorem ipsum dolor sit amet, consectetur adipisicing e 199kr Öppet Köp 10% rabatt vid onlineköp Gå direkt till
Lazycat it, sed do eiusmod tempor incididunt 198kr Svarta Marknaden Inget Slå till Direkt!
Hungrydog incididunt ut labore et dolore mag 197kr 3 dagars returrätt Bäst pris på eluttag Beräkna ditt pris här
sickhorse Lorem ipsum dolor sit amet, consectetur adipisicing e 196kr Öppet Köp Bra Service här Trevligt att handla nu
design:websimon

CSS tabell – Sno lite kod

Här nedanför erbjuder jag koden för css tabellen till dig som vill använda dig av produktjämförelser men vill slippa snickra ihop egen kod. Självklart går det att modda koden en hel del och jag skriver några hjälpande riktlinjer för det nedan.

Css – koden:

/* TABLE DESIGN */

#compare {
    border-collapse: collapse;
    font-family: Trebuchet MS;
    font-size: 0.7em;
    width: 540px;
}

/* TABLE HEAD */
#compare thead {
    background: -moz-linear-gradient(center top , #333333, #707070) repeat scroll 0 0 transparent;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#333333', endColorstr='#707070');
    background: -webkit-gradient(linear, left top, left bottom, from(#333333), to(#707070));
    color: #FFFFFF;
    font-size: 1.2em;
    height: 34px;
    text-align: left;
}

#compare thead tr th {
    padding:0px 5px 0px 5px;
    border-right: 1px dashed #CCCCCC;
}

/*TABLE BODY */
#compare tbody {

}

#compare tbody tr#one {
    background: none repeat scroll 0 0 #F6F6F6;
    border-bottom: 1px dashed #7A7A7A;
    padding-left: 5px;
    vertical-align: top;
    width: 100%;
}

#compare tbody tr#two {
    background: none repeat scroll 0 0 #FFF0E0;
    border-bottom: 1px dashed #7A7A7A;
    vertical-align: top;
    width: 100%;
}

#compare tbody td#one {
	width: 15%;
	border-right: 1px dashed #7a7a7a;
	padding-left: 5px;
	font-size: 1.3em;
}

#compare tbody td#two {
	width: 17%;
	border-right: 1px dashed #7a7a7a;
	padding-left: 5px;
}

#compare tbody td#three {
	width: 11%;
	border-right: 1px dashed #7a7a7a;
	padding-left: 5px;
}

#compare tbody td#four {
	width: 11%;
	border-right: 1px dashed #7a7a7a;
	padding-left: 5px;
}
#compare tbody td#five {
	width: 15%;
	border-right: 1px dashed #7a7a7a;
	padding-left: 5px;
}
#compare tbody td#six {
	width: 15%;
	padding-left: 5px;
}

/* TABLE FOOTER */
#compare tfoot,
#compare tfoot a {
    background: none repeat scroll 0 0 #FFFFFF;
    color: #CCCCCC;
    font-size: 7pt;
}

Html – koden

<table id="compare">

	<!-- Table header -->

		<thead>
			<tr>
				<th scope="col" id="one">Företag</th>
				<th scope="col" id="two">Erbjudande</th>
				<th scope="col" id="three">Pris</th>
				<th scope="col" id="four">Villkor</th>
				<th scope="col" id="five">Tänk På</th>
				<th scope="col" id="six">Call To Action</th>
			</tr>
		</thead>

	<!-- Table body -->

		<tbody>
			<tr id="one">
				<td id="one"></td>
				<td id="two"></td>
				<td id="three"></td>
				<td id="four"></td>
				<td id="five"></td>
				<td id="six"></td>

			</tr>
			<tr id="two">
				<td id="one"></td>
				<td id="two"></td>
				<td id="three"></td>
				<td id="four"></td>
				<td id="five"></td>
				<td id="six"></td>
			</tr>

			<tr id="one">
				<td id="one"></td>
				<td id="two"></td>
				<td id="three"></td>
				<td id="four"></td>
				<td id="five"></td>
				<td id="six"></td>

			</tr>

			<tr id="two">
				<td id="one"></td>
				<td id="two"></td>
				<td id="three"></td>
				<td id="four"></td>
				<td id="five"></td>
				<td id="six"></td>
			</tr>

<!-- Table footer -->
		<tfoot>
	        <tr>
				<td id="one"></td>
				<td id="two"></td>
				<td id="three"></td>
				<td id="four"></td>
				<td id="five"></td>
				<td id="six">design:<a href="http://websimon.se">websimon</td>
	        </tr>
		</tfoot>
	</tbody>

</table>

Tänk på detta:

  • Bredden på varje kolonn styrs med hjälp av en procentangivelse. Tex är kolonnen med css id td #one angiven med bredden 15%. Dvs bredden är då 15% av hela tabellen. Dessa procent kan förstås ändras för att få just det utseendet du önskar.
  • Radernas bakgrund alterneras med hjälp av två olika css-id: tr#one  och tr#two. Dessa bör varieras varannan gång i html koden för att få olika färg på varje rad och därmed en tydligare tabell.
  • Översta radens bakgrund är gjord i CSS3 och gradient, en av de få css3 saker som faktiskt fungerar helt ok i internet explorer utan alltför mycket fulhack.

Mer om CSS – tabeller

Nu är jag självklart inte ensam om att ha lagt ut kod på nätet för att göra liknande tabeller. Detta är endast mitt lilla bidrag till kodsamhället på nätet. Här nedan presenterar jag lite länkar för vidare letning på ämnet:

  • Top Ten CSS table designs: Smashing Magazines lista med bästa tabeller i css. I det här exemplet ovan utgick jag ifrån deras exempel på en korrekt angiven tabell enligt xhtml standarden. Förhoppningsvis har jag inte moddat alltför snett sedan.
  • 10 CSS tabellsexempel: DesignShack

Worpress plugin för tabeller

Använder du WordPress så finns det wordpress plugin för att skapa tabeller. Jag har själv inte fördjupat mig i detta ännu så länkarna här nere är en start för dig som letar efter detta:

<div id=”compwrapper”>

<div id=”comptop”>
<div class=”comp-one”>Företag</div>
<div class=”comp-two”>Erbjudande</div>
<div class=”comp-three”>Pris</div>
<div class=”comp-four”>Villkor</div>
<div class=”comp-five”>Tänk på</div>
<div class=”comp-six”>Call to Action</div>
</div>

<div class=”comprow”>
<div class=”comp-one”></div>
<div class=”comp-two”></div>
<div class=”comp-three”></div>
<div class=”comp-four”></div>
<div class=”comp-five”></div>
<div class=”comp-six”></div>
</div>

<div class=”comprow-var”>
<div class=”comp-one”></div>
<div class=”comp-two”></div>
<div class=”comp-three”></div>
<div class=”comp-four”></div>
<div class=”comp-five”></div>
<div class=”comp-six”></div>
</div>

<div class=”comprow”>
<div class=”comp-one”></div>
<div class=”comp-two”></div>
<div class=”comp-three”></div>
<div class=”comp-four”></div>
<div class=”comp-five”></div>
<div class=”comp-six”></div>
</div>

<div class=”comprow-var”>
<div class=”comp-one”></div>
<div class=”comp-two”></div>
<div class=”comp-three”></div>
<div class=”comp-four”></div>
<div class=”comp-five”></div>
<div class=”comp-six”></div>
</div>

</div>

3 Kommentarer

  1. J skriver:

    Simon ditt proffs! 😀
    Detta kan mkt väl komma till användning snart i ett projekt jag fått.

  2. websimon skriver:

    J: Tack, men proffs är jag definitivt inte 😉 Funderar nästan på att göra om koden här ovan och göra det som en riktig table istället för att floata med css… Får se om jag gör om det framåt.

    Nabil: Intressant, vad heter det plugin du använder?

  3. websimon skriver:

    Jag tycker även den tabellen såg mycket bra ut! Och det är intressant att se hur dessa jämförelser med bra designade css – tabeller verkligen ger i konverteringsgrad. Ibland tänker jag att man nästan måste blaffa upp det som man vill lyfta fram lite större om nu det inte blir att skriva på näsan på besökaren 😉 Typ ha större text och länkar i på den tabellraden som man tycker har bäst erbjudande.

Comment