tabellformatering

5 svar · 396 visningar · startad av plelkes 5 aug. 2003

plelkesMedlem sedan mars 2002823 inlägg

5 aug. 2003 13:02#1

Hej,
jag håller på att slita mitt hår med en tabell med 4 kolumner och 30 rader. Mitt problem är att jag försöker formatera tabellcellen på följande sätt:

cellerna i varje kolumn har olika bredd, men samma höjd
cellerna har "border" i underkanten enbart

Tacksam för hjälp med tabellen. Jag tror att det vore bäst att använda CSS, men jag får ej till det... x(

Jesper TMedlem sedan nov. 20017 058 inlägg

5 aug. 2003 14:41#2

Är det något sånt här du menar?

<style type="text/css">
<!--
td {
border-bottom:1px solid black;
height:60px;
 }
-->
</style>

bossseMedlem sedan juni 2003718 inlägg

6 aug. 2003 08:29#3

Har gjort ett exempel med css. Kanske det var ungefär så du menade?

<html> 
<head> 
<style "text/css"> 
<!-- 
#Tabell1 {width:90%; height:25%; border-collapse:collapse; border:3 solid blue; border-bottom:2 solid red;} 
#Tabell2 {width:90%; height:25%; border-collapse:collapse; border:3 solid blue;border-bottom:2 solid red;border-top:1 solid red;} 
.TD1{width:40%; background-color:gray;} 
.TD2{width:25%; background-color:silver;} 
.TD3{width:15%; background-color:gray;} 
.TD4{width:10%; background-color:silver;} 

--> 
</style> 
</head> 
<body bgcolor=green> 
<table id=Tabell1> 
<tr>  
	<td class=td1> </td> 
	<td class=td2> </td> 
	<td class=td3> </td> 
	<td class=td4> </td> 
</tr>
</table> 
<table id=Tabell2>
<tr> 
	<td class=td2> </td>
	<td class=td1> </td>
	<td class=td4> </td> 
	<td class=td3> </td> 
</tr>   
</table> 
<table id=Tabell2>
<tr> 
	<td class=td4> </td>
	<td class=td3> </td>
	<td class=td2> </td> 
	<td class=td1> </td> 
</tr>   
</table> 
</body> 
</html>

plelkesMedlem sedan mars 2002823 inlägg

17 aug. 2003 10:48#4

Hej igen,
nu har jag gjort mitt livs första stilmall..
Det blev en tabell. Jag är nöjd med resultatet , Men skulle villja att ni gurus slängde ett getöga på nedanstående kod:

<HTML>
<HEAD>
<TITLE>Untitled Document</TITLE>
CONTENT="text/html">
<STYLE TYPE="text/css">
<!--
.table {
	background-color: #CCCCCC;
	border-collapse:collapse;
	border: 1px solid #000000;
}
.tdleft {
	width: 43px;
	height: 35px;
	border-top-style: none;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: none;
	border-top-color: #000000;
	border-right-color: #000000;
	border-bottom-color: #000000;
	border-left-color: #000000;
	border-top-width: 1px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
}
.tdmitt {
	width: 250px;
	height: 35px;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: solid;
	border-left-style: none;
	border-top-color: #000000;
	border-right-color: #000000;
	border-bottom-color: #000000;
	border-left-color: #000000;
	border-top-width: 1px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
}
.tdright {
	width: 50px;
	height: 35px;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: solid;
	border-left-style: none;
	border-top-color: #000000;
	border-right-color: #000000;
	border-bottom-color: #000000;
	border-left-color: #000000;
	border-top-width: 1px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
}
-->
</STYLE>
</HEAD>

<BODY>
<TABLE WIDTH="350" BORDER="0" CELLPADDING="0" CELLSPACING="0" CLASS="table">
  <TR> 
    <TD CLASS="tdleft">&nbsp;</TD>
    <TD CLASS="tdmitt">&nbsp;</TD>
    <TD CLASS="tdright">&nbsp;</TD>
  </TR>
  <TR> 
    <TD CLASS="tdleft">&nbsp;</TD>
    <TD CLASS="tdmitt">&nbsp;</TD>
    <TD>&nbsp;</TD>
  </TR>
</TABLE>
</BODY>
</HTML>

Blev koden rätt, eller är det bara sinkadus att allt funkar som jag vill?
Förslag på saker som jag skulle skriva annorlunda?

plelkesMedlem sedan mars 2002823 inlägg

17 aug. 2003 17:12#5

I väntan på domen från Er - domen om att jag gjort rätt eller fle - har jag funderat vidare..
Vi skall man kunna göra så här?

.table {
	width: 350px;
	celplpading: none;
	cellspacing: none;
	background-color: #CCCCCC;
	border-collapse:collapse;
	border: 1px solid #000000;
}

.tdmitt {
	width: 250px;
	height: 35px;
	celplpading: 2px;
	cellspacing: 2px;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: solid;
	border-left-style: none;
	border-top-color: #000000;
	border-right-color: #000000;
	border-bottom-color: #000000;
	border-left-color: #000000;
	border-top-width: 1px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
}
.tdright {
	width: 50px;
	height: 35px;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: solid;
	border-left-style: none;
	border-top-color: #000000;
	border-right-color: #000000;
	border-bottom-color: #000000;
	border-left-color: #000000;
	border-top-width: 1px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
}
-->
</STYLE>
</HEAD>

<BODY>
<TABLE CLASS="table">
  <TR> 
    <TD CLASS="tdleft">2</TD>
    <TD CLASS="tdmitt">Peter</TD>
    <TD CLASS="tdright">&nbsp;</TD>
</TR>
</TABLE>

dvs lägga spacing och peding på cellnivå??
Om ni tittar på denna sida och väljer januari på månad:
kan jag på nå´t sätt använda css på tex Onsdag och nyårsdagen?
Typ fonten och texternas placering?
Och bör jag använda css till detta?

jarvkloMedlem sedan juli 20013 295 inlägg

17 aug. 2003 19:26#6

Blev koden rätt, eller är det bara sinkadus att allt funkar som jag vill?

Jupp... Validering ger dig bra betyg: http://jigsaw.w3.org/css-validator/validator?uri=http%3A//www31.brinkster.com/plelkesprojekt/test_css.html

Congratulations!
This document validates as CSS!

och http://validator.w3.org/check?uri=http%3A//www31.brinkster.com/plelkesprojekt/test_css.html

This Page Is Valid HTML 4.01 Transitional!

Förslag på saker som jag skulle skriva annorlunda?

Hmm...
Smaken är som baken! Du har gjort rätt - så det är inte mycket att orda om...

Om du fiskar efter tips med frågan så ;) :
Om alla fyra värdena för en viss stil är samma, så kan man skriva den lite förkortat om man vill.

border-top-color: #000000;
border-right-color: #000000;
border-bottom-color: #000000;
border-left-color: #000000;

kan t.ex. förkortas till

border-color: #000000;

Samma sak gäller border-width: och border-style: för övrigt..

Men som sagt - det är detaljer och man *måste* inte alltid förkorta/optimera om man inte vill !

Vi skall man kunna göra så här?

Hmm... Njae... inte direkt...

celplpading: none;
cellspacing: none;

är tyvärr inte giltig CSS...
Du kan använda

padding:0;

för cellerna istället för cellpadding, men motsvarigheten till cellspacing (som heter border-spacing) i CSS funkar inte i speciellt många webbläsare och framförallt inte i MSIE.

Sedan har jag för mig att man inte kan kombinera border-spacing med border-collapse:collapse, men jag har inte kollat upp det så noga så det kan vara en missuppfattning...

Det är inte fel att använda cellpadding=".." och cellapscing=".." i <table> - tvärtom, det är, enligt min mening, antagligen det säkraste sättet att få som man vill om man har en design som bygger på en kombination av dessa två värden i en tabell

Men om du bara vill ha bort avståndet mellan cellerna och paddingen inuti dem så skall det räcka med CSS-koden

border-collapse:collapse

på table och

padding:0

för cellerna för att få till *den* effekten... Och där är du ju i princip redan ;)

Lycka till med stilmallandet!
:bire