---
title: "Formge tabeller med Rubrik, beskrivning och bild"
type: "forum-thread"
url: "https://www.webforum.nu/amne/html-css/183482-formge-tabeller-med-rubrik-beskrivning-och-bild"
topic: "HTML & CSS"
topic_url: "https://www.webforum.nu/amne/html-css"
author: "LimeS"
published: "2010-05-13T06:41:31.000Z"
updated: "2010-05-16T13:50:43.000Z"
replies: 16
views: 848
page: 1
pages: 1
language: "sv-SE"
site: "webForum — webforum.nu"
rights: "Upphovsrätten till varje inlägg tillhör dess författare."
attribution: "Citera som: webForum, https://www.webforum.nu/amne/html-css/183482-formge-tabeller-med-rubrik-beskrivning-och-bild"
---

# Formge tabeller med Rubrik, beskrivning och bild

## #1 — LimeS, 2010-05-13T06:41Z

Hej!

Jag vill skapa "puffar", tre stycken på horisontell rad med Rubrik, beskrivning och bild.
Jag arbetar i wordpress och alltså en blandning mellan html/php som jag inte behärskar.

Superduper om ni kan hjälpa mig!

1: Hur får jag bilderna att stilas såhär:
{
    padding:3px;
    border: 1px solid #E0E0E0;
    display:block;
    
    background-color:#FFF;
    width:280px;
    height:50px;
    background-image: url('../img/common/ajax/loading1.gif');
    background-repeat:no-repeat;
    background-position: 50% 50%; 
}

2\. Jag har gjort puffarna i en tabell, men jag vill kunna ha olika
cellpadding mellan de olika raderna.. Hur gör jag det?

Äh, vafalls, jag bifogar hela tabellen när jag lika håller på:

\<table width="100%" cellpadding="15" cellspacing="30px"\>
\<TR cellpadding="5px"\>
\<TD\> \<h4 class="h4Normal" margin-left="10"\>Produkt\</h4\>\</TD\>
\<TD\> \<h4 class="h4Normal" margin-left="10"\>Puff med produkt\</h4\>\</TD\>
\<TD\>\<h4 class="h4Normal" margin-left="10"\>Något vi säljer\</h4\>\</TD\>
\</TR\>
\<TR height="50px" \>
\<TD\>\<p\>Ta med familjen på en resa till blablabla och blablbla. Stockholms skärgård är full av blablabla och oavsett väder kan ni blabla och blablabla.\</p\>\</TD\>
\<TD\>\<p\>Beskrivning av produkten blablablablaa aaa aaa beskrivning av produkteeeen.\</p\>\</TD\>
\<TD\>\<p\>Beskrivning av produkten blablablablaa aaa aaa beskrivning av produkteeeen.\</p\>\</TD\>
\</TR\>
\<TR height="50" cellspacing="30"\>
\<TD\> \<img src="http://test.com/test/wp-content/uploads/2010/05/bild.jpg" alt="" title="" width="280" height="200" class="imgpuff" /\> \</TD\>
\<TD\> \<img src="http://test.com/test/wp-content/uploads/2010/05/bild.jpg" alt="" title="" width="280" height="200" class="imgpuff" /\> \</TD\>
\<TD\>\<img src="http://test.com/test/wp-content/uploads/2010/05/bild.jpg" alt="" title="" width="280" height="200" class="imgpuff" /\>\</TD\>
\</TR\>

\</TABLE\>

Bilagor:

- [puffar.jpg](https://www.webforum.nu/a/21595.jpg)

Permalänk: https://www.webforum.nu/p/183482

## #2 — noshornin, 2010-05-13T08:28Z

Jag kanske missförstod dig på fråga 1. Men om du bara ville ha hjälp med att styla img elementet i css ska du skriva så här i head tagen elle ri din css fil: 

```
<style type="text/css">
img.imgpuff
{
padding:3px;
border: 1px solid #E0E0E0;
display:block;

background-color:#FFF;
width:280px;
height:50px;
background-image: url('../img/common/ajax/loading1.gif');
background-repeat:no-repeat;
background-position: 50% 50%; 
}
</style>
```

Kanske missförstod fråga 2 oxå men om du bara vill ha olika paddings på olika \<td\> elemnts så kan du skriva så här till exempel!

```
<style type="text/css">
td.padded1
{ 
padding-top:1px; 
padding-right:1px; 
padding-bottom:1px; 
padding-left:1px; 
}

td.padded2
{ 
padding-top:100px; 
padding-right:100px; 
padding-bottom:100px; 
padding-left:100px; 
}

td.padded3
{ 
padding-top:10px; 
padding-right:10px; 
padding-bottom:10px; 
padding-left:10px; 
}
</style>
```

Sen skriver du bara:

```
<table cellspacing="10" class="paddedTable" border=1>
<TR>
<TD class="padded1"> <h4 class="h4Normal" margin-left="10">Produkt</h4></TD>
<TD class="padded1"> <h4 class="h4Normal" margin-left="10">Puff med produkt</h4></TD>
<TD class="padded1"><h4 class="h4Normal" margin-left="10">Något vi säljer</h4></TD>
</TR>
<TR>
<TD class="padded2"><p>Ta med familjen på en resa till blablabla och blablbla. Stockholms skärgård är full av blablabla och oavsett väder kan ni blabla och blablabla.</p></TD>
<TD class="padded2"><p>Beskrivning av produkten blablablablaa aaa aaa beskrivning av produkteeeen.</p></TD>
<TD class="padded2"><p>Beskrivning av produkten blablablablaa aaa aaa beskrivning av produkteeeen.</p></TD>
</TR>
<TR>
<TD class="padded3"> <img src="http://test.com/test/wp-content/uploads/2010/05/bild.jpg" alt="" title="" width="280" height="200" class="imgpuff" /> </TD>
<TD class="padded3"> <img src="http://test.com/test/wp-content/uploads/2010/05/bild.jpg" alt="" title="" width="280" height="200" class="imgpuff" /> </TD>
<TD class="padded3"><img src="http://test.com/test/wp-content/uploads/2010/05/bild.jpg" alt="" title="" width="280" height="200" class="imgpuff" /></TD>
</TR>
</TABLE>
```

Permalänk: https://www.webforum.nu/p/2234814

## #3 — LimeS, 2010-05-13T09:29Z

Oooh du förstod mig alldeles utmärkt! TACK! @--',---

Det är på det viset att jag köpt ett theme där det finns en sorts hitlist som består av olika delar, jag vill ha den som ser ut som det du just hjälpte mig med.

Jag har css koden, vilka php/html-kod behöver jag skriva för att kunna infoga
detta på vilken wordpress-sida som helst?

\#featuresContainer
{
    width: 960px;
    padding-left: 0px;
    padding-right: 0px;
    margin: 0px;
 
    overflow: hidden;
    background-color: #FFF;
    margin-top: 20px;
    margin-bottom: 20px;
 }

\#featuresContainer .wrapper
{
    width:  319px;
    height: 150px;
    border-right: 1px solid #eeeeee;
    margin-top: 10px;
    float: left;
    position: relative;
    overflow: hidden;
}

\#featuresContainer .title
{
    font: normal 22px/22px "Trebuchet MS", Arial, Helvetica, sans-serif;
    color: #3399CC;
    margin-left: 16px;
}

\#featuresContainer .text
{
    font: 11px Verdana;
    color: #555;
    line-height: 140%;
    display: block;
    margin-left: 16px;
    margin-right: 20px;
    margin-top: 5px;
    margin-bottom: 8px;
}

\#featuresContainer .image
{

    padding:3px;
    border: 1px solid #E0E0E0;
    display:block;
    
    background-color:#FFF;
    width:280px;
    height:50px;
    background-image: url('../img/common/ajax/loading1.gif');
    background-repeat:no-repeat;
    background-position: 50% 50%;          
}

Permalänk: https://www.webforum.nu/p/2234816

## #4 — LimeS, 2010-05-13T11:51Z

Ännu mer hjälp:

På startsidan vill jag kunna lägga rad efter rad med såna här "puffar"..
Just nu förstår jag inte varför det är ett sådant enormt gap mellan de olika
tabellerna.. Varför?!

Antingen om du/någon annan kan hjälpa mig med att köra en exakt kopia och
använda css-koden jag bifogade nyss, eller så vill jag ha svar på hur jag får ned storleken på brödtexten.. Kan jag maxa höjden på den cellen i tabellen? Så att man
max kan ha tre rader text?

Jag längtar efter svar :)

Permalänk: https://www.webforum.nu/p/2234820

## #5 — noshornin, 2010-05-13T13:49Z

Tabort alla \<p\> och \<br\> tags som inte behövs:

```
<p class="beskrivning">Beskrivning av produkten blablablablaa aaa aaa beskrivning av produkteeeen.</p> 
</TD>
</TR>
<TR>
<td> <img src="http://test.com/test/wp-content/uploads/2010/05/bild.jpg" alt="" title="" width="280" height="200" class="imgpuff" /> </td> 
<td> <img src="http://test.com/test/wp-content/uploads/2010/05/bild.jpg" alt="" title="" width="280" height="200" class="imgpuff" /> </td> 
<td><img src="http://test.com/test/wp-content/uploads/2010/05/bild.jpg" alt="" title="" width="280" height="200" class="imgpuff" /></td> 
</TR> 
</TABLE>
<table class="puff" cellspacing="10" class="paddedTable" border=1> 
<TR>
<TD class="padded2">
<h4 class="h4Normal" margin-left="5">Sommarhelg i Skara</h4> 
<p class="puff">Ta med familjenKASJLAJ sdflkjsdlfj sdflksjdfsdf sdlfkjsdfj sdlfksjdf  sdlfksdf på en resa till</p> 
</TD>
<TD class="padded2"> 
<h4 class="h4Normal" margin-left="5">Sommarhelg i Skara</h4> 
<p class="beskrivning">Beskrivning av produkten blablablablaa aaa aaa beskrivning av produkteeeen.</p> 
</TD>
<TD class="padded2">
<h4 class="h4Normal" margin-left="5">Sommarhelg i Skara</h4> 
<p class="beskrivning">Beskrivning av produkten blablablablaa aaa aaa beskrivning av produkteeeen.</p> 
</TD> 
</TR>
<TR>
<td> <img src="http://test.com/test/wp-content/uploads/2010/05/bild.jpg" alt="" title="" width="280" height="200" class="imgpuff" /> </td> 
<td> <img src="http://test.com/test/wp-content/uploads/2010/05/bild.jpg" alt="" title="" width="280" height="200" class="imgpuff" /> </td> 
<td><img src="http://test.com/test/wp-content/uploads/2010/05/bild.jpg" alt="" title="" width="280" height="200" class="imgpuff" /></td> 
</TR> 
</TABLE>
```

Permalänk: https://www.webforum.nu/p/2234828

## #6 — noshornin, 2010-05-13T13:58Z

> **[LimeS skrev:](https://www.webforum.nu/p/1504866)**
>
> Kan jag maxa höjden på den cellen i tabellen? Så att man
> max kan ha tre rader text?

Det är nog enklare att begränsa antalet tecken som får läggas till när du lägger till nya "puffar". Det går enkelt att fixa i php/javascript!

Permalänk: https://www.webforum.nu/p/2234830

## #7 — LimeS, 2010-05-16T06:12Z

Hur då?

Permalänk: https://www.webforum.nu/p/2234950

## #8 — noshornin, 2010-05-16T07:37Z

Så här kan javascriptet på adminsidan se ut: <http://www.plus2net.com/javascript_tutorial/textarea-counter.php>

Sen kan du kolla längden med hjälp av strlen. T.ex såhär:

```
if(strlen($_POST["input namn"]) < 50){
//posta inlägget
} else {
//posta inte inlägget
}
```

Permalänk: https://www.webforum.nu/p/2234952

## #9 — LimeS, 2010-05-16T10:34Z

Okej, jag förstår.

Jag har fortfarande problem med ett fett mellanrum mellan mina tabeller,
varför blir det såhär?

Permalänk: https://www.webforum.nu/p/2234960

## #10 — noshornin, 2010-05-16T10:36Z

Jag har redan svarat på frågan du har massor av \<p\>, \<br\> tags som inte behövs. Om du tar bort dem så försvinner mellanrummet!

Permalänk: https://www.webforum.nu/p/2234961

## #11 — LimeS, 2010-05-16T11:32Z

Åh, jag ursäktar, infogade den kod du citerade i och med att du sa det första gången, trodde du hade modifierat den :)

Nu har jag uppdaterat men det blir inte bättre :/

Permalänk: https://www.webforum.nu/p/2234965

## #12 — noshornin, 2010-05-16T11:59Z

Jag hade modifierat den och du har inte infogat den på din sida. Du har fortfarande samma \<br\> och \<p\> tags kvar!

Permalänk: https://www.webforum.nu/p/2234967

## #13 — LimeS, 2010-05-16T12:05Z

Okej, nu har jag tagit bort allt jag hade där, och lagt in den kod du modifierat.
(varför bara halva första tabellen? nå, jag la in två tabeller efter varann)

Fortfarande fel. Jag förstår verkligen inte.. Det finns ju ingen \<br/\> kvar, och de
\<p\> som finns måste väl vara där..?

Permalänk: https://www.webforum.nu/p/2234968

## #14 — noshornin, 2010-05-16T12:19Z

Du har fortfarande kvar massor av br och p tags. 

```
<table class="puff" cellspacing="10" class="paddedTable" border=1> 
<TR> 
<TD class="padded2">
<h4 class="h4Normal" margin-left="5">Sommarhelg i Skara</h4> 
<p class="puff">Ta med familjenKASJLAJ sdflkjsdlfj sdflksjdfsdf sdlfkjsdfj sdlfksjdf  sdlfksdf på en resa till</p> 
</TD> 
<TD class="padded2"> 
<h4 class="h4Normal" margin-left="5">Sommarhelg i Skara</h4> 
<p class="beskrivning">Beskrivning av produkten blablablablaa aaa aaa beskrivning av produkteeeen.</p> 
</TD>
<TD class="padded2">
<h4 class="h4Normal" margin-left="5">Sommarhelg i Skara</h4> 
<p class="beskrivning">Beskrivning av produkten blablablablaa aaa aaa beskrivning av produkteeeen.</p> 
</TD>
</TR> 
<TR>
<td> <img src="http://test.com/test/wp-content/uploads/2010/05/bild.jpg" alt="" title="" width="280" height="200" class="imgpuff" /> </td> 
<td> <img src="http://test.com/test/wp-content/uploads/2010/05/bild.jpg" alt="" title="" width="280" height="200" class="imgpuff" /> </td> 
<td><img src="http://test.com/test/wp-content/uploads/2010/05/bild.jpg" alt="" title="" width="280" height="200" class="imgpuff" /></td> 
</TR> 
</TABLE>
<br>
<table class="puff" cellspacing="10" class="paddedTable" border=1> 
<TR> 
<TD class="padded2">
<h4 class="h4Normal" margin-left="5">Sommarhelg i Skara</h4> 
<p class="puff">Ta med familjenKASJLAJ sdflkjsdlfj sdflksjdfsdf sdlfkjsdfj sdlfksjdf  sdlfksdf på en resa till</p> 
</TD> 
<TD class="padded2"> 
<h4 class="h4Normal" margin-left="5">Sommarhelg i Skara</h4> 
<p class="beskrivning">Beskrivning av produkten blablablablaa aaa aaa beskrivning av produkteeeen.</p> 
</TD>
<TD class="padded2">
<h4 class="h4Normal" margin-left="5">Sommarhelg i Skara</h4> 
<p class="beskrivning">Beskrivning av produkten blablablablaa aaa aaa beskrivning av produkteeeen.</p> 
</TD>
</TR> 
<TR>
<td> <img src="http://test.com/test/wp-content/uploads/2010/05/bild.jpg" alt="" title="" width="280" height="200" class="imgpuff" /> </td> 
<td> <img src="http://test.com/test/wp-content/uploads/2010/05/bild.jpg" alt="" title="" width="280" height="200" class="imgpuff" /> </td> 
<td><img src="http://test.com/test/wp-content/uploads/2010/05/bild.jpg" alt="" title="" width="280" height="200" class="imgpuff" /></td> 
</TR> 
</TABLE>
```

Permalänk: https://www.webforum.nu/p/2234969

## #15 — LimeS, 2010-05-16T12:23Z

Det där är inte den aktuella koden. Jag har inga som helst br-taggar kvar.
Vilka \<p\> är onödiga? \<p class="beskrivning"\>? Ska allt sånt bort?

Permalänk: https://www.webforum.nu/p/2234970

## #16 — LimeS, 2010-05-16T13:23Z

Jag fick just reda på från annan källa att jag har "\<br\>
\<br\>
\<br\>
\<br\>
\<br\>
\<p\>\</p\>\<br\>"
före varje tabell, men jag ser dem inte! Förlåt så jättemycket, jag måste ha verkat
supertrög!

Men jag ser dem inte! HTML-läget i wordpress, och jag ser dem ändå inte.
Åh, nu blev jag helt deppig!

Permalänk: https://www.webforum.nu/p/2234972

## #17 — LimeS, 2010-05-16T13:50Z

Saken är härmed biff och löst! Konstigt men sant. Man lär sig något nytt varje dag. Tack för hjälpen, radera gärna denna underbart förvirrade tråd :D

Permalänk: https://www.webforum.nu/p/2234974

---

Tråden på webben: https://www.webforum.nu/amne/html-css/183482-formge-tabeller-med-rubrik-beskrivning-och-bild