skillnad på tabeller

Ge tabellen ett id:
<table id="minTabell"....
och i stilmallen kan du sen sätta t.ex.:
#minTabell {
width:300px;
}
#minTabell td {
blabla:5555;
}

Ett sätt är ju att bara använda tabeller för "rådata" och inte för att skapa snygga formulär... ;) Men det är förmodligen mer jobb än att sätta en klass på datatabellen.

Jag har många ggr gjort som Danne V föreslår, dvs. sätta ett id på tabellen.
Men allt oftare så är det inte en bra idé.
Eller att ha ett id på tabellen är helt ok men att designa den i css:en är sämre.
Detta för att jag ofta har flera "designade" tabeller på samma sida och då brister det med id:t.
Så att skapa klasser är då bättre tycker jag! :)

table.designad {
     width:300px;
     ...
}

table.form {
     width:200px;
     ...
}

...

<table class="designad">
</table>

<table class="form">
</table>

doggelito skrev:

Jag har många ggr gjort som Danne V föreslår, dvs. sätta ett id på tabellen.
Men allt oftare så är det inte en bra idé.
Eller att ha ett id på tabellen är helt ok men att designa den i css:en är sämre.
Detta för att jag ofta har flera "designade" tabeller på samma sida och då brister det med id:t.

Ett "id" gäller bara för en enhet på samma sida. "Class" kan appliceras på hur många som helst.

Har du flera tabeller på samma sida som du vill ska ganska lika ut, men där varje (eller några) ska ha lite annorlunda utseende, så kan du t.ex. börja med en generell still för alla:

table {width: 400px;border:1px solid #444;" }
table td, th {padding:3px;}
table th {background-color:#f5f5f5;}

...eller nåt. Sen kan du specialformatera individuella tabeller med t.ex. en class (för flera tabeller)

.tabellEtt {width:250px;"}
.tabellEtt th {background-color:#c00;}

..eller ett id (för en enda tabell:

#tabellExtra {width:150px;"}
#tabellExtra th {background-color:#444;}

Tack för svaren

Vad blir egentligen skillnaden på att köra:

.tabellEtt th {background-color:#c00;}

och

th.tabellEtt {background-color:#c00;}

När ska man använda det ena eller det andra?

Kan jag bygga min CSS så att jag bara kan sätta class på min table och sedan så fattar tr, td, th osv att det är den klassen jag vill använda på de andra också? Någon som har ett exempel?

.tabellEtt th

innebär ett th-element under ett element som har classen .tabellEtt

th.tabellEtt innebär en th med classen tabellEtt

Vad innebär det i praktiken för skillnad?

Fråga 2:

Kan jag ha en stylesheet som jag länkar in med

<link rel="stylesheet" href="stilmall.css" type="text/css" media="screen">

och sedan komplettera utanför i koden med:

	<style type="text/css">
#page {height:100%;}
</style>

Är detta möjligt?

I det första fallet får alla th under taggen med class tabellEtt den stilen, i det andra får bara den th som har class tabellEtt stilen.

2. Cascading Style Sheet betyder just det att stilmallar kan komma efter varandra och ta över. Sist kommer inline style direkt i html-taggen.

Har kikat runt lite och förstått det som att
.tabellEtt th {background-color:#c00;} används när man vill sätta ex. en div till detta, ex.
<div class="tabellEtt">
<table>
....
</table>
</div>

och table.tabellEtt används direkt på tabellen, ex.

<table class="tabellEtt">
...
</table>

Är detta korrekt?

Blir lite nyfiken på hur många tabeller du har på samma sida som ska se olika ut?
Får bara en känsla av att det blir mer komplicerat än det behöver vara.
Du skriver att du vill se något exempel. Har en tabell liggandes som har en enda class för att placera summan längst till höger i sin cell. Kan den vara värd att titta på t.ex.?

Jag har en tabell för att snygga till ett formulär och en tabell för att visa rådata (som ska style'as med css). Kan hända att jag kommer att ha flera tabeller som ska visa rådata på samma sida, varför jag vill använda class istället för id.

Men du behöver ju inte använda vare sig det ena eller andra för en tabell...
Jag visar mitt exempel

table{
width: 30em;
border:#7d0000 1px solid;
border-collapse:collapse;
color: #000;
margin:5px ;
text-align:center;
}
caption{
font-size: 0.7em;
caption-side: top;
font-weight:bold;
text-align:center;
}
th{
background-color: #7d0000;
color: #fff;
border: #000 1px solid;
border-collapse: collapse;
font: bold 10px Arial,Helvetica,sans-serif;
padding: 1px 3px;
text-align:center;
}
td{
background: #fff;
border: #000 1px solid;
border-collapse: collapse;
color: #000;
font: 11px Arial,Helvetica,sans-serif;
width: auto;
}
td.hoger{text-align:right;
}
..............
Tabellen väldigt förkortad...
<table summary="resultaten under 2007>
 <caption>Här visas resultaten.</caption>
    <tr>
      <th>År</th>

      <th>etta</th>
      <th>summa</th>
      </tr>
   <tr>
<td>2007</td>
<td>6</td>
<td class="hoger">142 500 kr</td>
   </tr>
</table>

Absolut. Det är jag med på.

Jag förklarar min fråga en gång till (nu med lite kodex.):

<table>
<tr>
<td>Vanlig tabell. Ska ej stylas</td>
</tr>
</table>

Här kommer rådatan:

<table>
<tr>
<td>1</td><td>2</td><td>3</td>
</tr>
</table>

Min css kan se ut ex. såhär:

table{
margin:5px ;
text-align:center;
}
td{
font: 11px Arial,Helvetica,sans-serif;
width: auto;
}
minstil.table {
text-align:left;
}
minstil.td {
background: #fff;
border: #000 1px solid;
border-collapse: collapse;
color: #000;
}

Det jag vill göra är att sätta klassen "minstil" på den andra tabel'n och låta tabel nr 1 vara helt normal. Räcker det om jag sätter class="minstil" på table eller måste jag även sätta det på td?

Det blir ju minst kod om du väljer att sätta ett id på den tabellen som ska vara annorlunda. Jag gissar att du kommer vilja att rådata-tabellerna kommer se lika dana ut. Och att formulärtabellen kommer vara unik.
#form table{...
#form th{
Men det var iofs inte svar på din fråga... Har aldrig testat din variant så jag känner mig lite osäker där.

Men nu när jag tänker efter så fungerar inte din kod. Du måste vända på dem och ha table och td först. minstil är ju ingenting...?
När du vänt på dem så misstänker jag att du måste sätta class="minstil" i varje cell.

Jag pushar väl för mitt svar igen då! :)
http://www.webforum.nu/showthread.php?p=1315415#post1315415
Enklare kan det inte bli, en klass för rådata och en för formuläret!
Vill du sedan ha flera rådatatabeller på samma sida så sätter du bara samma klass på den tabellen också. Klart!
(Givetvis så bygger du på klasserna så att även th, td blir stylade, ex. table.designad th {})

Upptäckt att jag förmodligen var väldigt trött i går utan att fatta det... Självklart ger class samma resultat som om man använder ett id.
Bra att du pushar doggelito :-)

johgu skrev:

Jag förklarar min fråga en gång till (nu med lite kodex.):

...

minstil.table {
text-align:left;
}
minstil.td {
background: #fff;
border: #000 1px solid;
border-collapse: collapse;
color: #000;
}

Det jag vill göra är att sätta klassen "minstil" på den andra tabel'n och låta tabel nr 1 vara helt normal. Räcker det om jag sätter class="minstil" på table eller måste jag även sätta det på td?

En punkt betyder class och skrivs som första tecken i class-namnet:

/*tabell med class=minstil:*/
table.minstil {
text-align:left;
}

/*och td i tabellen med class=minstil:*/
.minstil td {
background: #fff;
border: #000 1px solid;
border-collapse: collapse;
color: #000;
}

Edit: Du måste inte skriva: table.minstil i css-en för att använda classen i en tabell, det räcker med: .minstil för att definiera classen. Och vill du sätta stil för tabeller i en div med class=minstil skriver du: .minstil table i css-en.

doggelito skrev:

Enklare kan det inte bli, en klass för rådata och en för formuläret!

Jo, jag kanske inte var tillräckligt tydlig. Men jag vill inte ha en egen klass för formuläret utan de ska gå som standardmallen för en tabell så jag slipper speca varje formulär-tabell (kan bli rätt många...). Dock vill jag ha en class för rådata. Är det någon som har kodex på detta?