+ MENY
2011 Jan 5
9

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:

Läs mer från den här bloggen

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

SPONSRAT - REKOMMENDERADE OCH TESTADE WEBBHOTELL:
Webbhotell Pris/mån Utrymme Trafik Domän
City Network 74kr 250GB 5000GB Obegränsat
Binero 36kr 10GB 30GB Obegränsat
Surftown 36kr 10GB 30GB Obegränsat
One.com 12kr 3GB Fri 1
Loopia 83kr 5GB Fri Obegränsat
Strongbox 65kr 5GB 40GB Obegränsat
Om Simon Rybrand
Jag som driver den här bloggen heter Simon Rybrand. Här skriver jag om entreprenörskap, internetmarknadsföring och webbdesign.Jag driver framförallt sajten MatematikVideo.se där målet är att hjälpa så många som möjligt att lyckas med sina kurser i matematik.

9 Kommentarer

  1. […] This post was mentioned on Twitter by Nabil El Alaoui. Nabil El Alaoui said: RT @websimonR: Gör Produktjämförelse med CSS tabell: http://bit.ly/hVUwUh, nybloggat på Websimon m. gratis kod 😉 […]

  2. J skriver:

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

  3. Nabil skriver:

    Jag hatar att sitta och pilla i koder som är (för) avancerade. Har installerat ett WordPress-tillägg som sköter allt det där med att skapa tabeller åt mig :)

  4. 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?

  5. Herr K skriver:

    Efter att ha läst detta inlägget så gav jag mig på att testa pluggen WP-Table Reloaded, Jag blev mycket nöjd med resultatet! Kolla mitt inlägg om mynten Silver Lunar för att se ett exempel på pluggen. Snyggt och lättöverskådligt :)

  6. websimon skriver:

    Herr K: Snyggt! Det ser bra ut. En designad tabell med CSS kan göra susen för att göra en pris- eller produktjämförelse snyggare och mer lättläst. Kul också att wp-table reloaded verkar fungera bra!

    Själv så lyckas jag alltid grotta ner mig i någon css – kod istället för att välja det enkla alternativet med ett plugin! 😉

  7. Herr K skriver:

    Ja, jag har testat detta på min sajt om villaförsäkringar. Återstår att se hur bra detta funkar…

    Du är en kodnörd, vilket är tacksamt för mig som lär mig 😉

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