Notifikationer

Markér alle som læst Log ud

htx98i17 Professor

06. april 2010 - 07:44 Der er 21 kommentarer og
1 løsning

centrere tabel i en tabel

Jeg er ikke så trænet i CSS, så jeg begriber ikke lige hvorfor indretabel ikke centreres i ydretabel?

<style>

.ydretabel {
Background-image : url(grafik/10x9outergray.gif);
Background-repeat : repeat-x;
Background-color : #ececec;
Border : 0px;
Height : 9px;
Margin : 0px;
Padding : 0px;
Width : 100%;
}

.indretabel {
Background-image : url(grafik/10x9gray.gif);
Background-repeat : repeat-x;
Background-color : #FFFFFF;
Border-left : 1px SOLID #b0d4f7;
Border-right : 1px SOLID #b0d4f7;
Height : 9px;
Margin : 0px;
Padding : 0px;
Text-align : center;
Width : 976px;
}

</style>

<table class="ydretabel" >
<tr>
<td >

<table class="indretabel" >
<tr>
<td >
Denne tabel skal centreres i den ydre tabel
</td>
</tr>
</table>

</td>
</tr>
</table>

Synes godt om

htx98i17 Professor

06. april 2010 - 07:51 #1

Nå, og jeg som mente jeg havde skrevet text-align i class ydretabel. Så nu vil den gerne centrere sig. Men denne kode var kun et eksempel på den rigtige kode, og i den rigtige kode virker det IKKE.

Den rigtige kode er her, kan nogen fortælle hvorfor tabelleb som har class indreskygge ikke vil centrere sig og hvordan man får tabellen med class A4 til at centrere sig med CSS?

.A4 {
Background-color : #FFFFFF;
Border-left : 1px DOTTED #b0d4f7;
Border-right : 1px SOLID #b0d4f7;
Border-bottom : 1px SOLID #b0d4f7;
Min-height : 600px;
Margin : 0px;
Padding : 0px;
Text-align : left;
Vertical-align : top;
Width : 976px;
}

HTML,BODY {
Background-color : #ececec;
Height : 100%;
Margin : 0px;
Padding : 0px;
Width : 100%;
}

.bund {
Border : 0px;
Color : #CCCCCC
Font : Courier;
Font-size : 12pt;
Height : 9px;
Margin : 0px;
Padding : 0px;
Text-align : center;
Width : 976px;
}

.indreskygge {
Background-image : url(grafik/10x9gray.gif);
Background-repeat : repeat-x;
Background-color : #FFFFFF;
Border-left : 1px SOLID #b0d4f7;
Border-right : 1px SOLID #b0d4f7;
Height : 9px;
Margin : 0px;
Padding : 0px;
Text-align : center;
Width : 976px;
}

.menublok {
Background-image : url(grafik/1x66.gif);
Background-repeat : repeat-x;
Background-color : #b0d4f7;
Border : 0px;
Height : 66px;
Margin : 0px;
Padding : 0px;
Width : 100%;
Text-align : center;
}

.reklameblok {
Background-color : #000000;
Border : 0px;
Height : 100px;
Margin : 0px;
Padding : 0px;
Width : 100%;
Text-align : middle;
}

.ydreskygge {
Background-image : url(grafik/10x9outergray.gif);
Background-repeat : repeat-x;
Background-color : #ececec;
Border : 0px;
Height : 9px;
Margin : 0px;
Padding : 0px;
Text-align : center;
Width : 100%;
}

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//DA"
"http://www.w3.org/TR/html4/loose.dtd" >
<HTML>
<HEAD>
<TITLE>Ny side</TITLE>

<LINK rel="stylesheet" href="stylesheet.css" type="text/css">
<META HTTP-EQUIV="Content-type" CONTENT="text/html; charset=UTF-8">
</HEAD>

<BODY >

<table class="reklameblok" >
<tr>
<td > </td>
</tr>
</table>

<table class="menublok" >
<tr>
<td > </td>
</tr>
</table>

<table class="ydreskygge" >
<tr>
<td >

<table class="indreskygge" >
<tr>
<td ><img src="grafik/1x1.gif" ></td>
</tr>
</table>

</td>
</tr>
</table>

<table class="A4" >
<tr>
<td >Indhold her </td>
</tr>
</table>

<table class="bund" >
<tr>
<td >Her står en masse tekst i bunden af siden</td>
</tr>
</table>

</BODY>
</HTML>

Synes godt om

htx98i17 Professor

06. april 2010 - 08:09 #2

Jeg har fundet ud af at det er DOCTYPE som gør at der ikke centreres. Men hvorfor??

Synes godt om

htx98i17 Professor

06. april 2010 - 08:32 #3

Jeg fandt svaret her:
http://w3schools.com/css/css_align.asp

Nu er der desværre bare en lille afstand mellem indretabel og ydretabel?

Koden ser således ud:

.A4 {
Background-color : #FFFFFF;
Border-left : 1px DOTTED #b0d4f7;
Border-right : 1px SOLID #b0d4f7;
Border-bottom : 1px SOLID #b0d4f7;
Min-height : 600px;
Margin-left : auto;
Margin-right : auto;
Padding : 0px;
Text-align : left;
Vertical-align : top;
Width : 976px;
}

HTML,BODY {
Background-color : #ececec;
Height : 100%;
Margin : 0px;
Padding : 0px;
Width : 100%;
}

.bund {
Border : 0px;
Color : #CCCCCC
Font : Courier;
Font-size : 12pt;
Height : 9px;
Margin : 0px;
Padding : 0px;
Text-align : center;
Width : 976px;
}

.indreskygge {
Background-image : url(grafik/10x9gray.gif);
Background-repeat : repeat-x;
Background-color : #FFFFFF;
Border-left : 1px SOLID #b0d4f7;
Border-right : 1px SOLID #b0d4f7;
Height : 9px;
Margin-left : auto;
Margin-right : auto;
Padding : 0px;
Text-align : center;
Width : 976px;
}

.menublok {
Background-image : url(grafik/1x66.gif);
Background-repeat : repeat-x;
Background-color : #b0d4f7;
Border : 0px;
Height : 66px;
Margin : 0px;
Padding : 0px;
Width : 100%;
Text-align : center;
}

.reklameblok {
Background-color : #000000;
Border : 0px;
Height : 100px;
Margin : 0px;
Padding : 0px;
Width : 100%;
Text-align : middle;
}

.ydreskygge {
Background-image : url(grafik/10x9outergray.gif);
Background-repeat : repeat-x;
Background-color : #ececec;
Border : 0px;
Height : 9px;
Margin : 0px;
Padding : 0px;
Text-align : center;
Width : 100%;
}

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//DA"
"http://www.w3.org/TR/html4/loose.dtd" >
<HTML>
<HEAD>
<TITLE>Ny side</TITLE>
<META HTTP-EQUIV="Content-type" CONTENT="text/html; charset=UTF-8">
<LINK rel="stylesheet" type="text/css" href="stylesheet.css" >
</HEAD>

<BODY >

<table class="reklameblok" >
<tr>
<td > </td>
</tr>
</table>

<table class="menublok" >
<tr>
<td> </td>
</tr>
</table>

<table class="ydreskygge" >
<tr>
<td>
<table class="indreskygge" >
<tr>
<td><img src="grafik/1x1.gif"></td>
</tr>
</table>
</td>
</tr>
</table>

<table class="A4" >
<tr>
<td >Indhold her </td>
</tr>
</table>

<table class="bund" >
<tr>
<td >Her står en masse tekst i bunden af siden</td>
</tr>
</table>

</BODY>
</HTML>

Synes godt om

olebole Juniormester

06. april 2010 - 10:46 #4

<ole>

Prøv at flytte din celleafslutning op bag table-slut-tagget:

<table class="ydreskygge" >
<tr>
<td>
<table class="indreskygge" >
<tr>
<td><img src="grafik/1x1.gif"></td>
</tr>
</table></td>
</tr>
</table>

Og prøv evt. også at bruge border-collapse på dine tabeller:

table.ydreskygge,
table.indreskygge {
border-collapse: collapse;
}

http://www.w3.org/TR/CSS2/tables.html#propdef-border-collapse

/mvh
</bole>

Synes godt om

htx98i17 Professor

06. april 2010 - 10:59 #5

Jeg fik postet mit eksempelkode i stedet for den rigtige kode. Sorry.

Jeg har dog prøvet det du har foreslået Ole i den rigtige kode, som nu ser således ud:
(border-collape fjernede kun lidt af mellemrummet)

.A4 {
Background-color : #FFFFFF;
Border-left : 1px SOLID #b0d4f7;
Border-right : 1px SOLID #b0d4f7;
Border-bottom : 1px SOLID #b0d4f7;
Min-height : 600px;
Margin-left : auto;
Margin-right : auto;
Padding : 8px;
Text-align : left;
Vertical-align : top;
Width : 976px;
}

HTML,BODY {
Background-color : #ececec;
Height : 100%;
Margin : 0px;
Padding : 0px;
Width : 100%;
}

.bund {
Border : 0px;
Color : #CCCCCC
Font : Courier;
Font-size : 12pt;
Height : 9px;
Margin : 0px;
Padding : 0px;
Text-align : center;
Width : 976px;
}

.indreskygge {
Background-image : url(grafik/10x9gray.gif);
Background-repeat : repeat-x;
Background-color : #FFFFFF;
Border-left : 1px SOLID #b0d4f7;
Border-right : 1px SOLID #b0d4f7;
Border-collapse : collapse;
Height : 9px;
Margin-left : auto;
Margin-right : auto;
Padding : 0px;
Text-align : center;
Width : 976px;
}

.menublok {
Background-image : url(grafik/1x66.gif);
Background-repeat : repeat-x;
Background-color : #b0d4f7;
Border : 0px;
Height : 66px;
Margin : 0px;
Padding : 0px;
Width : 100%;
Text-align : center;
}

.reklameblok {
Background-color : #000000;
Border : 0px;
Height : 100px;
Margin : 0px;
Padding : 0px;
Width : 100%;
Text-align : middle;
}

.ydreskygge {
Background-image : url(grafik/10x9outergray.gif);
Background-repeat : repeat-x;
Background-color : #ececec;
Border : 0px;
Height : 9px;
Margin : 0px;
Padding : 0px;
Text-align : center;
Width : 100%;
}

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//DA"
"http://www.w3.org/TR/html4/loose.dtd" >
<HTML>
<HEAD>
<TITLE>Ny side</TITLE>
<META HTTP-EQUIV="Content-type" CONTENT="text/html; charset=UTF-8">
<LINK rel="stylesheet" type="text/css" href="stylesheet.css" >
</HEAD>

<BODY >

<table class="reklameblok" >
<tr>
<td > </td>
</tr>
</table>

<table class="menublok" >
<tr>
<td> </td>
</tr>
</table>

<table class="ydreskygge" >
<tr>
<td>
<table class="indreskygge" >
<tr>
<td><img src="grafik/1x1.gif">
</tr>
</table></td>
</tr>
</table>

<table class="A4" >
<tr>
<td >Indhold her </td>
</tr>
</table>

<table class="bund" >
<tr>
<td >Her står en masse tekst i bunden af siden</td>
</tr>
</table>

</BODY>
</HTML>

Synes godt om

htx98i17 Professor

06. april 2010 - 12:12 #6

Kan noget af svaret være cellspacing? det fjerner noget af mellemrummet? men cellspacing må kunne overføres til CSS ?

Synes godt om

olebole Juniormester

06. april 2010 - 12:16 #7

border-collapse:collapse fjerner cellspacing, så der er ikke mere at hente dér.

Prøv at lægge et link til eksemplet. Det er lettere, hvis man kan se fejlen =)

Synes godt om

htx98i17 Professor

06. april 2010 - 12:29 #8

Nu har jeg tilføjet border-collapse på alle tables og det har fjernet næsten al mellemrummet. Men der er stadig et lille mellemrum på ca. 1 pixel. Jeg har desværre ikke siden online, kun på skrivebordet.

Men CSS koden ser nu således ud:
.A4 {
Background-color : #FFFFFF;
Border-left : 1px SOLID #b0d4f7;
Border-right : 1px SOLID #b0d4f7;
Border-bottom : 1px SOLID #b0d4f7;
Border-collapse : collapse;
Min-height : 600px;
Margin-left : auto;
Margin-right : auto;
Padding : 8px;
Text-align : left;
Vertical-align : top;
Width : 976px;
}

HTML,BODY {
Background-color : #ececec;
Height : 100%;
Margin : 0px;
Padding : 0px;
Width : 100%;
}

.bund {
Border : 0px;
Border-collapse : collapse;
Color : #CCCCCC
Font : Courier;
Font-size : 12pt;
Height : 9px;
Margin : 0px;
Padding : 0px;
Text-align : center;
Width : 976px;
}

.indreskygge {
Background-image : url(grafik/10x9gray.gif);
Background-repeat : repeat-x;
Background-color : #FFFFFF;
Border-left : 1px SOLID #b0d4f7;
Border-right : 1px SOLID #b0d4f7;
Border-collapse : collapse;
Height : 9px;
Margin-left : auto;
Margin-right : auto;
Padding : 0px;
Text-align : center;
Width : 976px;
}

.menublok {
Background-image : url(grafik/1x66.gif);
Background-repeat : repeat-x;
Background-color : #b0d4f7;
Border : 0px;
Border-collapse : collapse;
Height : 66px;
Margin : 0px;
Padding : 0px;
Width : 100%;
Text-align : center;
}

.reklameblok {
Background-color : #000000;
Border : 0px;
Border-collapse : collapse;
Height : 100px;
Margin : 0px;
Padding : 0px;
Width : 100%;
Text-align : center;
}

.ydreskygge {
Background-image : url(grafik/10x9outergray.gif);
Background-repeat : repeat-x;
Background-color : #ececec;
Border : 0px;
Border-collapse : collapse;
Height : 9px;
Margin : 0px;
Padding : 0px;
Width : 100%;
}

Og Html:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//DA"
"http://www.w3.org/TR/html4/loose.dtd" >
<HTML>
<HEAD>
<TITLE>Ny side</TITLE>
<META HTTP-EQUIV="Content-type" CONTENT="text/html; charset=UTF-8">
<LINK rel="stylesheet" type="text/css" href="stylesheet.css" >
</HEAD>

<BODY >

<table class="reklameblok" >
<tr>
<td > </td>
</tr>
</table>

<table class="menublok" >
<tr>
<td> </td>
</tr>
</table>

<table class="ydreskygge" >
<tr>
<td>
<table class="indreskygge" >
<tr>
<td><img src="grafik/1x1.gif">
</tr>
</table></td>
</tr>
</table>

<table class="A4" cellspacing="0">
<tr>
<td >Indhold her </td>
</tr>
</table>

<table class="bund" >
<tr>
<td >Her står en masse tekst i bunden af siden</td>
</tr>
</table>

</BODY>
</HTML>

Hvis du bruger det, så kan du se mellemrummet mellem ydretabel og A4 tabellen

Synes godt om

olebole Juniormester

06. april 2010 - 13:00 #9

Prøv at lægge et link =)

Synes godt om

olebole Juniormester

06. april 2010 - 13:02 #10

Du kan evt. finde et gratis sted at uploade - der er en del 'derude' ;o)

Synes godt om

olebole Juniormester

06. april 2010 - 13:11 #11

Du har i øvrigt et par fejl i din CSS:

Color : #CCCCCC; /* <-- Du mangler dette semikolon */
Font-family /* <-- Her mangler du 'family' */ : Courier;

Desuden skal du huske, at CSS er case sensitive, og property-navne skal staves med lille begyndelsesbogstav ;o)

Synes godt om

htx98i17 Professor

06. april 2010 - 16:32 #12

Tak for svar. Den ligger her nu: http://test.klipper.dk/

Kan du se det lille mellemrum?

Er det OK at bygge siden op i tables eller er det mere moderne at bruge div?

Synes godt om

olebole Juniormester

06. april 2010 - 16:43 #13

Det er ikke bare moderne at bruge div - det er som oftest langt bedre ;o)

Derudover ved jeg ikke rigtig, hvilken browser, jeg skal se siden i. Den ser mildt sagt helt forskellig ud i IE og FF. Du mangler da vist også et td-sluttag i din kode:

Synes godt om

htx98i17 Professor

06. april 2010 - 16:49 #14

Jeg ser den i IE.
Firefox, hvad er det? :))

Synes godt om

htx98i17 Professor

06. april 2010 - 16:50 #15

Hvor mange bruger egentlig andre browsere end IE, ved du det?

Synes godt om

htx98i17 Professor

06. april 2010 - 16:52 #16

fandt lige svaret http://www.w3schools.com/browsers/browsers_stats.asp :)

Synes godt om

htx98i17 Professor

06. april 2010 - 20:51 #17

Hvis du ser den i IE, kan du så se mellemrummet?

Synes godt om

htx98i17 Professor

07. april 2010 - 07:57 #18

Jeg må hellere oprette et nyt spørgsmål med en mere sigende overskrift.

Du må gerne ligge et svar og modtage point for din hjælp. DEt kan være du kan svare på mit næste spm jeg opretter.

Synes godt om

htx98i17 Professor

09. april 2010 - 11:00 #19

Ole! lig et svar :)

Synes godt om

htx98i17 Professor

13. april 2010 - 12:18 #20

ping

Synes godt om

htx98i17 Professor

15. april 2010 - 17:41 #21

giv lyd

Synes godt om

htx98i17 Professor

30. juni 2010 - 19:38 #22

lukker

Synes godt om

Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Følg dette spørgsmål

Opret Preview

Webudvikling kurser

Vi tilbyder markedets bedste kurser inden for webudvikling

Se alle Webudvikling kurser

Flere spørgsmål fra HTML kategorien

Titel	Indlæg	Oprettet	Seneste aktivitet
Hjælp med HTML og CSS Af Nojsa i HTML	18	10/09/202515:07	17/09/202515:11
CSS 2 x firkanter + tekst på samme linje Af nemlig i HTML	3	19/03/202522:16	20/03/202513:04
Se og ændre html på en webside Af magger i HTML	4	11/03/202513:55	12/03/202506:56
Få input felt, der er med fed skrift og formatteres på linje Af KurtG i HTML	5	02/03/202520:05	04/03/202515:40
Variabler som ikke virker Af Frits Jensen i HTML	3	30/10/202409:37	01/01/202515:27

Se alle spørgsmål i kategorien Opret spørgsmål

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten

Seneste artiklerRSS

30/12

Apples vilde planer for 2026: Her er de banebrydende produkter vi venter på

30/12

Årets 10 mest populære Computerworld-artikler: Her er historierne, der for alvor hittede

30/12

CBS lukker en stribe uddannelser: Vil fokusere på teknologi og digitalisering

30/12

En af verdens vildeste it-stillinger: Bliver CIO for over to millioner ansatte

30/12

AI-projekter fejler ikke på teknologien – de fejler på ledelsen

30/12

ERP, sikkerhed og datacentre: Her er tre store tech-opkøb du måske er gået glip af i juleferien

30/12

Omsætningen i Comm2ig rasler ned med over en halv milliard kroner: Fastholder alligevel "hovedparten af medarbejderstaben"

30/12

Stod bag dansk milliard-app: Nu kaster han sig over et nyt projekt

30/12

Bøger: Obamas bud på årets vigtigste udgivelser

30/12

Microsofts danske udviklingscenter er tynget af høje omkostninger

30/12

Meta opkøber ombejlet kinesisk AI-selskab: Vil integrere teknologien i Facebook og Instagram

Vis flere artikler

IT-JOB

Schilling ApS

Support Specialist

Netcompany A/S

Test Consultant

Netcompany A/S

Test Consultant

Netcompany A/S

Linux Operations Engineer

Netcompany A/S

Managing Architect

Vis flere jobs

Seneste spørgsmål Seneste aktivitet

27/1222:02	Låse brugt iPad op Af drstein i iOS, iPhone & iPad
27/1219:21	Hvor finder jeg en oversigt over mine spørgsmål Af KurtG i Hjælp og fejl
27/1211:31	TP-Link Wifi extender opsat som accesspoint giver 50% up- og download, Af Uvanga i Wifi
26/1213:05	Hvorfor bliver tiff-filer større ved konvertering til samme format Af KurtG i Billedbehandling
23/1221:36	Gøre Ikonerne lidt større i proceslinjen (Windows 10) Af Ikke-ekspert i Windows

White papers

Samarbejde mellem AI og mennesker styrker sikkerheden
Konica Minolta
Er I klar til at tage næste skridt på den digitale retailrejse?
TDC Erhverv
Undgå at printeren bliver svageste led i sikkerheden
Konica Minolta
IT i front: Sådan bliver netværk en strategisk driver
TDC Erhverv

Flere white papers »