Bestemme design på tabeller med css?

[_Adler_]

Hei!

 

Har noen spørsmål som først og fremst handler om tabeller.

Holder nemlig på å lage en tabell (nei jeg setter ikke opp utseendet til siden min med tabeller ), og da lurer jeg også på om html koden for å f.eks. gi tabeller en viss

utseende/farge osv. fortsatt gjelder eller om det er css som har tatt over. Kan nevne

denne koden, som jeg fant i en guide på internett:

<table align="center" width="80" border="1" bgcolor="red" bordercolor="blue">

Center taggen er i alle fall utdatert, bgcolor og bordercolor sikkert også hvis man

skriver f.eks. html 4.0 strict...? Vet ikke helt hva jeg skriver jeg, men skal nesten bare

bruke eksternt stilsett, så det blir vell strict!?

 

Noen som vet hvordan denne koden blir hvis man skal skrive den i css? Gjerne flere koder som omhandler akkurat dette er også ønskelig å få oppgitt

 

På forhånd takk for svar!

[ace_ventuora]

Altfor lenge siden jeg har drevet med dette, men:

 

Html:

<table id="tabell"></tabell">

 

Css:

tabell
{
width: 80px;
background-color: Red;
border-color: blue;
border-width: 1px;
text-align: center;
}

 

Håper det er riktig

[Mira]

ville satt en # foran tabell, men ellers så det riktig ut det

[potetskrell]

Altfor lenge siden jeg har drevet med dette, men:

 

Html:

<table id="tabell"></tabell">

 

Css:

tabell
{
width: 80px;
background-color: Red;
border-color: blue;
border-width: 1px;
text-align: center;
}

 

Håper det er riktig

Det blir nok ikke rett. Text-align sentrerer faktisk teksten. Du må ikke la deg forvirre av noe annet. Skal man sentrere noe må man bruke text-align: center, ja, men bare som en tweak for Ie og brukt på en helt annen måte. Søk "sentrering" på forumet og du finner masse svar.

 

Det er ikke noe som heter <tabell>

 

En tabell må ha <td></td> eller lignende i seg. Les mer om det.

 

Man skriver ofte border: 1px solid blue;

 

Les mye mer om tabeller her: http://www.w3.org/TR/REC-html40/struct/tables.html#h-11.2.1

 

Tabeller er faktisk ganske nyttige. Og du kan faktisk gjøre mye mer med tabeller enn folk flest vet.

Endret 6. mai 2005 av Ingardj

[Loomy]

Tabeller er faktisk ganske nyttige. Og du kan faktisk gjøre mye mer med tabeller enn folk flest vet.

Håper ikke du refererer til oppbygning av layout nå, for så vidt jeg var klar over kan tabeller kun brukes til visning av tabulære data. Nothing more, nothing less

[PT]

Håper ikke du refererer til oppbygning av layout nå, for så vidt jeg var klar over kan tabeller kun brukes til visning av tabulære data. Nothing more, nothing less

Tabeller kan vel brukes til layout, men om det er semantisk korrekt er vel en annen sak

[potetskrell]

Tabeller er faktisk ganske nyttige. Og du kan faktisk gjøre mye mer med tabeller enn folk flest vet.

Håper ikke du refererer til oppbygning av layout nå, for så vidt jeg var klar over kan tabeller kun brukes til visning av tabulære data. Nothing more, nothing less

Så klart. Men så gikk det nå også klart frem at trådstarter faktisk skulle bruke tabellen til det den skal brukes til.

 

[haugsand]

Det blir nok ikke rett. Text-align sentrerer faktisk teksten. Du må ikke la deg forvirre av noe annet. Skal man sentrere noe må man bruke text-align: center, ja, men bare som en tweak for Ie og brukt på en helt annen måte. Søk "sentrering" på forumet og du finner masse svar.

Mulig jeg tolker kommentaren din feil, men jeg tror du har misforstått litt. Text-align: center; midtstiller inline-innhold som tekst og bilder, og brukes ikke nødvendigvis bare som en tweak. Text-align: center; blir helt korrekt å bruke i dette tilfellet.

 

Det du sannsynligvis tenker på, er metoden for å sentrere blokk-innhold med angitt bredde, som div, p, og h1. I IE blir også blokkelement sentrert vha text-align: center, og siden IE 5 ikke tolker margin: 0 auto; korrekt, legger vi ofte til text-align: center.

[potetskrell]

satyrium, hehe, ja, kanskje litt dårlig forklart. Men jeg sier jo til fyren at han må søke på "sentrering". Da finner han ut hvordan han sentrerer divven. Ikke sant?

 

Det jeg ville frem til var at text-align: center ikke gjør noe annet enn å sentrere teksten osv. i hans tilfelle. Trodde i hvert fall det gikk klart frem.

 

----

 

Edit: Det er helt i orden

Endret 7. mai 2005 av Ingardj

[haugsand]

Ingardj: Jeg trodde at teksten i tabellen skulle midtstilles, og ikke selve tabellen. Beklager misforståelsen

[_Adler_]

tabell

{

width: 80px;

background-color: Red;

border-color: blue;

border-width: 1px;

text-align: center;

}

Har jeg forstått det rett kan man droppe text-align: center, da denne bare midtstiller teksten inne i hver celle...? Skriver man text-align: left stiller vell teksten inne i hver celle seg til ventre.

 

Post nr. 1000

[potetskrell]

tabell

{

width: 80px;

background-color: Red;

border-color: blue;

border-width: 1px;

text-align: center;

}

Har jeg forstått det rett kan man droppe text-align: center, da denne bare midtstiller teksten inne i hver celle...? Skriver man text-align: left stiller vell teksten inne i hver celle seg til ventre.

 

Post nr. 1000

Ja, men hjelper jo ikke deg

 

Har du lest guiden til sentrering nøye? Regner med at tabellen ligger inne i en div?

[_Adler_]

tabell

{

width: 80px;

background-color: Red;

border-color: blue;

border-width: 1px;

text-align: center;

}

Har jeg forstått det rett kan man droppe text-align: center, da denne bare midtstiller teksten inne i hver celle...? Skriver man text-align: left stiller vell teksten inne i hver celle seg til ventre.

 

Post nr. 1000

Ja, men hjelper jo ikke deg

 

Har du lest guiden til sentrering nøye? Regner med at tabellen ligger inne i en div?

Da tenker du på denne? I såfall har jeg lest den, men ikke satt meg sikkelig inn i den.

Har enda ikke kommet så langt at den ligger inne i en div.

Endret 7. mai 2005 av _Adler_

[_Adler_]

Denne koden til en tabell jeg har lyst til å bruke fant jeg på den siden som Ingardj linket til: http://www.w3.org/TR/REC-html40/struct/tables.html#h-11.2.1 :

<TABLE>
<TR>
   <TH colspan="5" scope="colgroup">Community Courses -- Bath Autumn 1997</TH>
 </TR>
 <TR>
   <TH scope="col" abbr="Name">Course Name</TH>
   <TH scope="col" abbr="Tutor">Course Tutor</TH>
   <TH scope="col">Summary</TH>
   <TH scope="col">Code</TH>
   <TH scope="col">Fee</TH>
 </TR>
 <TR>
   <TD scope="row">After the Civil War</TD>
   <TD>Dr. John Wroughton</TD>
   <TD>
      The course will examine the turbulent years in England
      after 1646. <EM>6 weekly meetings starting Monday 13th
     October.</EM>
   </TD>
   <TD>H27</TD>
   <TD>£32</TD>
 </TR>
 <TR>
   <TD scope="row">An Introduction to Anglo-Saxon England</TD>
   <TD>Mark Cottle</TD>
   <TD>
      One day course introducing the early medieval
      period reconstruction the Anglo-Saxons and
      their society. <EM>Saturday 18th October.</EM>
   </TD>
   <TD>H28</TD>
   <TD>£18</TD>
 </TR>
 <TR>
   <TD scope="row">The Glory that was Greece</TD>
   <TD>Valerie Lorenz</TD>
   <TD>
    Birthplace of democracy, philosophy, heartland of theater, home of
    argument. The Romans may have done it but the Greeks did it
    first. <EM>Saturday day school 25th October 1997</EM>
   </TD>
   <TD>H30</TD>
   <TD>£18</TD>
 </TR>
</TABLE>

Noen som vet om scope er utdatert? F.eks. scope="col".

Det som også er, er at jeg ikke helt forstår prinippet:

Note the use of the scope attribute with the "row" value. Although the first cell in each row contains data, not header information, the scope attribute makes the data cell behave like a row header cell. This allows speech synthesizers to provide the relevant course name upon request or to state it immediately before each cell's content.

Er den eneste grunnen til at man bruker scope, at språk "program" eller lignende oppfatter at det og det er en overskrift. Egentlig er det altså liten vits i å bruke scope om ikke brukerene bruker dette?!

 

På forhånd takk for svar!

[Cucum(r)]

scope-attributten forteller om cellen inneholder informasjon for en celle eller en rad, så vidt jeg har forstått.

Den er grei å ha med, uansett om du har lesere som er enten blinde eller døve eller ei.

 

Er du interessert i å lære mer om tabeller har Roger Johansson en glimrende artikkel navngitt 'Bring on the tables'

[_Adler_]

scope = scope-name

This attribute specifies the set of data cells for which the current header cell provides header information. This attribute may be used in place of the headers attribute, particularly for simple tables. When specified, this attribute must have one of the following values:

 

row: The current cell provides header information for the rest of the row that contains it.

 

col: The current cell provides header information for the rest of the column that contains it.

 

rowgroup: The header cell provides header information for the rest of the row group that contains it.

 

colgroup: The header cell provides header information for the rest of the column group that contains it

Dette står i den w3 linken.

Bytter jeg verdiene fra f.eks. scope="row" til "col" eller lignende, skjer det jo ingenting. Er det meningen? Altså at det ikke vises, men er bare info. for folk som ser i kildekoden o.l.

 

Takk for linken SirICe.

[_Adler_]

Jeg bare lurer på hvordan man får en tabell til å vise tydelige streker rundt hver "boks", i CSS.

Til nå har jeg skrevet border:"1" inne i <table> elementet. border: 5px solid blue; gjør jo bare at det blir en "bord/kant" rundt selve tabellen, men jeg ønsker rundt hver boks.

 

Til nå har jeg gjort det på følgende måte:

HTML

<html>
<head>
<title>Fuglekasse-skjema 2005</title>
<link rel=stylesheet type="text/css" href="style.css">
</head>
<body>
<table id="tabell" border="1">
<tr>
<th colspan="8" scope="colgroup">Fuglekassene 2005 </th>
</tr>
<tr>
<th>Kasse nr.</th>
<th>Hekkende art</th>
<th>Ca. dato for egglegging</th>
<th>Antall egg</th>
<th>Antall uklekte egg</th>
<th>Antall døde unger</th>
<th>Antall levende unger</th>
<th>Dato utflygning</th>
</table>
</body>
</html>

 

CSS

 

#tabell
{
width: 600px;
background-color: green;
border-color: red;
border-width: 1px
border: 1px solid blue;
}

 

Hvis jeg gjør det på denne måten klarer jeg også å bestemme at det skal være kant rundt hver "boks" ved bare å slenge inn border inne i <table>.

Jeg ønsker gjerne å bestemme tykkelsen på disse kantene rundt hver "boks" med css. Noen som vet svar på det jeg spør om?