---
title: "text i tabell"
type: "forum-thread"
url: "https://www.webforum.nu/amne/html-css/86457-text-i-tabell"
topic: "HTML & CSS"
topic_url: "https://www.webforum.nu/amne/html-css"
author: "rozie"
published: "2003-09-19T17:21:28.000Z"
updated: "2003-09-20T00:08:35.000Z"
replies: 9
views: 629
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/86457-text-i-tabell"
---

# text i tabell

## #1 — rozie, 2003-09-19T17:21Z

jag lyckas inte få texten i en tabell att börja i toppen och gå neråt. har provat skriva valign-top men det funkar inte

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

## #2 — OlleBoop, 2003-09-19T17:34Z

Kod tack!

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

## #3 — Hallgren, 2003-09-19T17:44Z

i din \<td\> kör du valign="top" eller kör du css och då kör du blir det ex. 

```
<style type="text/css">
td.top	{vertical-align:top;}
</style>
```

 sen \<td class="top"\>

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

## #4 — bossse, 2003-09-19T17:53Z

jag gjorde för nåt år sedan detta exempel. 
Du ser säkert hur det funkar. 

```
<html>
<head>
<style type="text/css"> 
<!-- 
table { width:100%; height:100%; border:red 2px solid; } 
td { border: 2px solid; color:blue;} 
.text1 { border: 2px solid; text-align:right; vertical-align:text-top;} 
.text2 { border: 2px solid; text-align:justify; } 
.text3 { border: 2px solid; text-align:center; vertical-align:text-middle;} 
.text4 { border: 2px solid; vertical-align:text-top;} 
.text5 { border: 2px solid; vertical-align:text-bottom;} 
.text6 { border: 2px solid; text-align:right; vertical-align:text-middle;} 
--> 
</style> 

</head>
<body bgcolor=lightblue>

<table  bgcolor=lightgreen cellpadding="0" cellspacing="0"> 
<tr> 
<td class="text1">Högerställd text, högst uppe</td> 
<td class="text2">Vänsterställd text, vertikalt centrerad</td> 
</tr><tr> 
<td class="text3">Texten centrerad vertikalt o horizontellt</td> 
<td class="text4">Texten högst upp, vänsterställd</td> 
</tr><tr> 
<td class="text5">Texten nertill, vänsterställd</td> 
<td class="text6">Texten högerställd, vertikalt centrerad</td> 
</tr> 
</table> 
</body>
</html>
```

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

## #5 — Brantis, 2003-09-19T19:01Z

> **bossse skrev:**
>
> jag gjorde för nåt år sedan detta exempel. 
> Du ser säkert hur det funkar.

I Firebird kommer *.text5* längst upp till vänster, vilket inte är meningen. :(

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

## #6 — dectgap, 2003-09-19T19:41Z

> **sub, super, text-top, text-bottom**
>     These values do not apply to cells; the cell is aligned at the baseline instead.

<http://www.w3.org/TR/REC-CSS2/tables.html#height-layout>

Jag ändrade en del i bosses exempel:

```
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<style type="text/css">
table { border-collapse: collapse; background-color: #ccc;}
td { width: 100px; height: 100px; border: 1px solid #000;}
.text1 { text-align: right;  vertical-align: top;}
.text2 { text-align: left;   vertical-align: middle;}
.text3 { text-align: center; vertical-align: middle;}
.text4 { text-align: left;   vertical-align: top;}
.text5 { text-align: left;   vertical-align: bottom;}
.text6 { text-align: right;  vertical-align: middle;}
</style>
</head>
<body>

<table>
  <tr>
    <td class="text1">Högerställd text, högst uppe</td>
    <td class="text2">Vänsterställd text, vertikalt centrerad</td>
  </tr>
  <tr>
    <td class="text3">Texten centrerad vertikalt o horizontellt</td>
    <td class="text4">Texten högst upp, vänsterställd</td>
  </tr>
  <tr>
    <td class="text5">Texten nertill, vänsterställd</td>
    <td class="text6">Texten högerställd, vertikalt centrerad</td>
  </tr>
</table>
</body>
</html>
```

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

## #7 — bossse, 2003-09-19T20:12Z

Fast denna ändring med fasta mått på td funkar ej om man anger bredd och höjd på tabellen. 
Funkar dock om man BARA anger höjd på td.

```
td { width: 100px; height: 100px; border: 1px solid #000;}
```

Oavsett om man använder pixel eller procent för tabellstorlek.  
Texten kommer inte rätt då!
Man kanske vill ha en tabell som täcker större delen av skärmen.

Egentligen så är det ju raden (tr) som har en höjd, kolumnen (td) får ju automatisk den höjden enl. nedan.
Så därför har jag moddat exemplet lite till .

```
<style type="text/css">
table {width: 100%; height:90%; border-collapse: collapse; background-color: #ccc;}
tr {height:100px;}
td {border: 1px solid #000;}
.text1 { text-align: right;  vertical-align: top;}
.text2 { text-align: left;   vertical-align: middle;}
.text3 { text-align: center; vertical-align: middle;}
.text4 { text-align: left;   vertical-align: top;}
.text5 { text-align: left;   vertical-align: bottom;}
.text6 { text-align: right;  vertical-align: middle;}
</style>
```

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

## #8 — rozie, 2003-09-19T20:19Z

tackar nu funkar det!
men jag dök på ett nytt problem... i tabellen lägger jag inte text som är valign-top och align-justify. problemet är att lägger jag in för mycket text så justerar tabellen sig och blir större... finns det nåt sätt man kan låsa måtten på?

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

## #9 — rozie, 2003-09-19T20:21Z

behöver ni kodexempel?

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

## #10 — dectgap, 2003-09-20T00:08Z

Om du anger en fast bredd för tabellen/kolumnen/cellen kommer texten inte att ändra på bredden, såvida ett enskilt ord inte är bredare än tabellens/kolumnens/cellens bredd. Om du skoningslöst vill klippa ord som är längre än vad de får vara kan du skriva så här:

```
<table style="table-layout: fixed; width: 100px;">
  <tr>
    <td style="overflow: hidden">Ett superdupermegaenormtjättelångt ord</td>
  </tr>
</table>
```

Annars kan du välja att visa en scrollist, då innehållet inte får plats:

```
<table style="width: 100px;">
  <tr>
    <td><div style="overflow: auto">Ett superdupermegaenormtjättelångt ord</div></td>
  </tr>
</table>
```

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

---

Tråden på webben: https://www.webforum.nu/amne/html-css/86457-text-i-tabell
