webForumDet fria alternativet
Logga in / Bli medlem

Hjälp med tabell formateringen.

HTML & CSSur HTML, XHTML & CSS

11 svar · 465 visningar · startad av plelkes

plelkesMedlem sedan mars 2002823 inlägg
Frågan#1

..skulle jag behöva :q
På min projektsida ser ni en vägg kalender med tabell celler.
Som ni ser ser det rätt ok ut när sidan laddas för första gången eftersom augusti inte har ngra helgdagar. Men om ni ändrar i dropp-down till januari och eller november ser ni vad jag talar om...
För tillfället är tabelllen kodad:

<TABLE ALIGN=CENTER BORDER=1 CELLSPACING=1 WIDTH=75% HEIGHT=75% >
<TH COLSPAN=7> <FONT SIZE=+2>

Och de celler där helgdagar finns:

<TD ALIGN="CENTER" VALIGN="MIDDLE"><CENTER>
<FONT COLOR="#FF0000" SIZE="2">aKalender(i)</FONT>
<P ALIGN="CENTER"><FONT COLOR="#FF0000" SIZE="2"> Trettondagen</FONT></P></CENTER></TD>

tacksam för hjälp med ovanstående

JaarMedlem sedan juli 2001434 inlägg
#2

Hmm... kolla detta, kan hjälpa lite iaf... om jag int fattat fel...

Sätt CELLPADDING=1 (eller så många pixlar du vill ha) på tabellen

Sedan är det frågan vad du vill fixa iof, det jag föreslog tar bort så att det vita runt nummren inte är så långt

Du kanske vill ha så tabellen alltid är fixerad.

Då får du gå in på CSS.

myCell {
widht: Xpx;
height: Xpx;
overflow: hidden;
vertical-align: middle;
}

Kanske... vet inte riktigt.. men kolla lite på CSS, eller om nån annan här fixar det åt dig...

plelkesMedlem sedan mars 2002823 inlägg
#3

Sedan är det frågan vad du vill fixa

Det jag behöver hjälp med är att tabellcellerna skall hela tiden vara lika stora - oavsett om det står en röd helgdag i de eller inte

plelkesMedlem sedan mars 2002823 inlägg
#4

Hoppas ni förstår vad jag är ute efter, och kan ge mig en spark i rätt riktning :stud

bossseMedlem sedan juni 2003772 inlägg
#5

Usch! vilken rörig kod du hade!
Utseendet på tabell och celler bör alltid göras med hjälp av css.
Jag har här gjort ett exempel på hur du kan göra med klasser för tabellen samt med
cellerna vardag (grön), helg (röd) och tomma(svart).
Dessa anropas sedan via ID:n.
Texten kommer alltid centrerad om inte textmassan
är större än själva cellen. vilket den ju ej behöver vara i detta fall.
Är dock inte helt säker på om detta följer standarden!


<html>
<head>
<style "text/css">
<!--
BODY {background-color:lightgreen;}
#Tabell{width:90%; height:90%; border:3 solid black;
font-size:14pt;color:yellow; border-collapse:collapse;} 
#vardag {width:14%; height:20%; background-color:green; border:2 solid blue; text-align:center;} 
#helg {width:14%; height:20%; background-color:red; border:2 solid blue; text-align:center; vertical-align:text-middle;} 
#tom {width:14%; height:20%; background-color:black; border:2 solid blue;} 
-->
</style >
</head>
<body bgcolor="#C2C287" text="#000000" id="all" leftmargin="10" topmargin="10" marginwidth="10" marginheight="10" link="#660000" vlink="#660000" alink="#660000">

<table id=tabell >

<tr>
<td id=vardag>
1 
</td>
<td id=vardag>
2
</td>
<td id=vardag>
3
</td>
<td id=vardag>
4
</td>
<td id=vardag>
5
</td>
<td id=vardag>
6
</td>
<td id=helg>
7
</td>
</tr>
<tr>
<td id=vardag>
8 
</td>
<td id=vardag>
9
</td>
<td id=helg>
10 <BR> Helgdag helgdag
</td>
<td id=vardag>
11
</td>
<td id=vardag>
12
</td>
<td id=vardag>
13
</td>
<td id=helg>
14
</td>
</tr>
<tr>
<td id=vardag>
15
</td>
<td id=vardag>
16
</td>
<td id=vardag>
17
</td>
<td id=vardag>
18
</td>
<td id=vardag>
19
</td>
<td id=vardag>
20
</td>
<td id=helg>
21
</td>
</tr>
<tr>
<td id=vardag>
22
</td>
<td id=vardag>
23
</td>
<td id=vardag>
24
</td>
<td id=vardag>
25
</td>
<td id=helg>
26 <BR> Helgdag
</td>
<td id=vardag>
27
</td>
<td id=helg>
28
</td>
</tr>
<tr>
<td id=vardag>
29 
</td>
<td id=vardag>
30
</td>
<td id=tom>
</td>
<td id=tom>
</td>
<td id=tom>
</td>
<td id=tom>
</td>
<td id=tom>
</td>
</tr>
</table>
</body>
</html>
NoMasterMedlem sedan sep. 2002106 inlägg
#6

bossse skrev:

</td>
<td id=tom>
</td>
<td id=tom>
</td>

glöm inte att lägga nåt i dom tomma cellerna när du ändå håller på. Tex &nbsp; eller en liten trnsp. bild

bossseMedlem sedan juni 2003772 inlägg
#7

Det blev något fel i mitt förra inlägg.

Det ska endast vara <BODY>

Forumet lägger till detta, trots att jag har dubbelkollat förhandsgranskning innan jag skickar!

Ska alltså ej vara enligt nedan. endast <BODY>

<body bgcolor="#C2C287" text="#000000" id="all" leftmargin="10" topmargin="10" marginwidth="10" marginheight="10" link="#660000" vlink="#660000" alink="#660000">

NoMaster skrev följande:
glöm inte att lägga nåt i dom tomma cellerna.
Varför det? de ska ju vara tomma!

plelkesMedlem sedan mars 2002823 inlägg
#8

Tack för din hjälp bosse -

Texten kommer alltid centrerad om inte textmassan
är större än själva cellen. vilket den ju ej behöver vara i detta fall

Men mitt problem är snarare att de tabelceller där det blir helgdagar, där blir cellerna större än övriga celler.

  • Hur kan jag undvika detta?

Jag har här gjort ett exempel på hur du kan göra med klasser för tabellen samt med
cellerna vardag (grön), helg (röd) och tomma(svart).

Jag misstänkte att jag behöver CSS. Mina tabellceller genereras av ASP-kod. Vet därför inte om jag kan göra som du har i ditt ex

NoMasterMedlem sedan sep. 2002106 inlägg
#9

bossse skrev:

NoMaster skrev följande:
glöm inte att lägga nåt i dom tomma cellerna.
Varför det? de ska ju vara tomma!

För att man aldrig ska ha tomma td-s i html ;)

<edit>Du kan tex. söka på tomma tabellceller här i forumet, eller ändra söktermer, finns hur många trådar som helst om det.</edit>

plelkesMedlem sedan mars 2002823 inlägg
#10

bossse du skriver hela tiden

#vardag {width:14%; height:20%; background-color:green; border:2 solid blue; text-align:center;}

Borde det inte vara

.vardag {width:14%; height:20%; background-color:green; border:2 solid blue; text-align:center;}
bossseMedlem sedan juni 2003772 inlägg
#11

Men mitt problem är snarare att de tabelceller där det blir helgdagar, där blir cellerna större än övriga celler.
Funkar inte detta då?

<html>
<head>
<style "text/css">
<!--
BODY {background-color:lightgreen;}

#Månad {background-color:green;width:91%; height:12%; border:2 solid white; text-align:center; font-size:14pt;color:yellow; border-collapse:collapse; } 
#Tabell{width:91%; height:72%; border:3 solid white;font-size:14pt;color:yellow; border-collapse:collapse;} 
#vardag {width:13%; height:12%; background-color:green; border:2 solid blue; text-align:center;} 
#Helg {width:13%; height:12%; background-color:red; border:2 solid blue; text-align:center;} 
#Tom {width:13%; height:12%; background-color:black; border:2 solid blue;} 
-->
</style >
</head>
<body>

<table id=månad>
<tr>
<td>
Månadens namn 2003
</td>
</tr>
<tr>
</table>
<table id=tabell>
<td id=vardag>
Måndag 
</td>
<td id=vardag>
Tisdag
</td>
<td id=vardag>
Onsdag
</td>
<td id=vardag>
Torsdag
</td>
<td id=vardag>
Fredag
</td>
<td id=vardag>
Lördag
</td>
<td id=helg>
Söndag
</td>
</tr>
<tr>
<td id=tom>
</td>
<td id=tom>
</td>
<td id=vardag>
1
</td>
<td id=vardag>
2
</td>
<td id=vardag>
3
</td>
<td id=vardag>
4
</td>
<td id=helg>
5
</td>
</tr>
<tr>
<td id=vardag>
6 
</td>
<td id=vardag>
7
</td>
<td id=helg>
8 <BR> Helgdag
</td>
<td id=vardag>
9
</td>
<td id=vardag>
10
</td>
<td id=vardag>
11
</td>
<td id=helg>
12
</td>
</tr>
<tr>
<td id=vardag>
13
</td>
<td id=vardag>
14
</td>
<td id=vardag>
15
</td>
<td id=vardag>
16
</td>
<td id=vardag>
17
</td>
<td id=vardag>
18
</td>
<td id=helg>
19
</td>
</tr>
<tr>
<td id=vardag>
20
</td>
<td id=vardag>
21
</td>
<td id=vardag>
22
</td>
<td id=vardag>
23
</td>
<td id=helg>
24 <BR> Helgdag
</td>
<td id=vardag>
25
</td>
<td id=helg>
26
</td>
</tr>
<tr>
<td id=vardag>
27 
</td>
<td id=vardag>
28
</td>
<td id=vardag>
29
</td>
<td id=vardag>
30
</td>
<td id=tom>
</td>
<td id=tom>
</td>
<td id=tom>
</td>
</tr>
<FORM ACTION="" METHOD="post">
  <TABLE WIDTH="82%" BORDER="1" ALIGN="CENTER" CELLPADDING="1" CELLSPACING="1" ID="val">
           <TD WIDTH="119" HEIGHT="30"><CENTER>
          V&auml;lj &Aring;r (&Aring;&Aring;&Aring;&Aring;)</CENTER></TD>
      <TD WIDTH="50" HEIGHT="30"> <DIV ALIGN="LEFT"> 
          <INPUT NAME="Year" TYPE="text" SIZE="10" MAXLENGTH="4">
        </DIV></TD>
      <TD><CENTER>V&auml;lj M&aring;nad 
        </CENTER></TD>
      <TD><SELECT NAME="month" SIZE="1">
          <OPTION VALUE="1">Januari</OPTION>
          <OPTION VALUE="2">Februari</OPTION>
          <OPTION VALUE="3">Mars</OPTION>
          <OPTION VALUE="4">April</OPTION>
          <OPTION VALUE="5">Maj</OPTION>
          <OPTION VALUE="6">Juni</OPTION>
          <OPTION VALUE="7">Juli</OPTION>
          <OPTION VALUE="8">Augusti</OPTION>
          <OPTION VALUE="9">September</OPTION>
          <OPTION VALUE="10">Oktober</OPTION>
          <OPTION VALUE="11">November</OPTION>
          <OPTION VALUE="12">December</OPTION>
        </SELECT></TD>
    </TR>
    <TR> 
      <TD COLSPAN="4" HEIGHT="30"> <DIV ALIGN="RIGHT">
          <INPUT TYPE="submit" NAME="Submit" VALUE="Visa Almanacka">
        </DIV></TD>
    </TR>
  </TABLE>
</FORM>
</table>

</body>
</html>

Till Plelkes

Visst kan man skriva .vardag i css och sedan anropa med CLASS=vardag
eller som jag gjort #vardag och sedan anropa med ID=vardag
Vad skillnaden är vet jag ej, men resultatet blir detsamma.

dectgaps avatardectgapMedlem sedan sep. 20021 655 inlägg
#12

bosse:
ID ska, till skillnad från CLASS, vara unikt per sida. Du får alltså bara använda ett ID en gång per sida - om du vill gruppera celler efter hur de ska se ut använder du istället CLASS.

137 ms totalt · 3 externa anrop · v20260731065814-full.25f56b17
0 ms — hämta forumlista (cache)
0 ms — hämta statistik (cache)
135 ms — hämta tråd, inlägg och bilagor (db)