Hoppa till innehåll

Foto

Röd linje i tabell


  • Vänligen logga in för att kunna svara
5 svar till detta ämne

#1 Glenn H

Glenn H

    Användare

  • Medlemmar
  • PipPip
  • 42 inlägg

Postad 11 augusti 2010 klockan 21:26

Jag gör en tabell, en sån där klassisk fotbollstabell med lagen uppradade efter placering. Och såklart så finns det ju en gräns för dom lag som kommer att flyttas ner som brukar visas med en röd linje.

Så då är frågan, vilket sätt är bäst för att få dit den röda linjen?

t.ex en röd linje mellan dessa två:

<table  class="tabell_text_12" width="50%" cellspacing="0" cellpadding="0" border="0">
<tr>
	<td width="7%" align="center">Pos.</td>
	<td width="30%" align="left">Lag</td>
	<td width="7%" align="center">Ma</td>
	<td width="7%" align="center">Vi</td>
	<td width="7%" align="center">Oa</td>
	<td width="7%" align="center">Fö</td>
	<td width="7%" align="center">MF</td>
	<td width="7%" align="center">-</td>
	<td width="7%" align="center">MB</td>
	<td width="7%" align="center">Diff</td>
	<td width="7%" align="center">Po</td>
</tr>
<tr>
	<td width="7%" align="center">1</td>
	<td width="30%" align="left">Saturnus BK</td>
	<td width="7%" align="center">26</td>
	<td width="7%" align="center">17</td>
	<td width="7%" align="center">6</td>
	<td width="7%" align="center">3</td>
	<td width="7%" align="center">58</td>
	<td width="7%" align="center">-</td>
	<td width="7%" align="center">18</td>
	<td width="7%" align="center">40</td>
	<td width="7%" align="center">57</td>
</tr>

</table>


#2 Cluster

Cluster

    Omniscient

  • Moderatorer
  • 7 989 inlägg

Postad 11 augusti 2010 klockan 23:06

Varför inte använda TH för tabellrubriker (det är ju därför den finns)?

Dessutom så skulle jag helt klart välja att "stajla" tabellen med CSS eftersom du då både får en snyggare och mer logisk syntax/markup samt enkelt kan ändra utseendet
Typ:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>Eforum - 222363</title>
		<style type="text/css">
			#allsvTable {
				border-collapse:collapse;
				font-family:Arial, Helvetica, sans-serif;
				font-size: 0.85em;
				}
		
			#allsvTable th {
				background-color: #000;
				border-bottom:solid 1px #FFF;
				border-collapse:collapse;
				font-weight:bold;
				color:#FFF;
				}
		
			#allsvTable td { 
				padding: 0px 8px 0px 6px;
				border-bottom:1px solid #999;
				text-align:right;
				}
		
			#allsvTable #first td {
				background-color: #3C3;
				}
		
			#allsvTable #second td, #allsvTable #third td {
				background-color: #95FFCA;
				}
		
			#allsvTable #thirdLast td {
				background-color: #FED07A;
				}
		
			#allsvTable #last td, #allsvTable #secondLast td {
				background-color: #EC797C;
				}
		
			#allsvTable .left { text-align:left; }
			#allsvTable .right { text-align:right; }
			#allsvTable .center { text-align:center; }
		</style>
	</head>
	
	<body>
		<table id="allsvTable">
			<thead>
				<tr height="20">
					<th>Pos</th>
					<th class="left">Lag</th>
					<th>S</th>
					<th>V</th>
					<th>O</th>
					<th>F</th>
					<th>+</th>
					<th>-</th>
					<th>P</th>
				</tr>
			</thead>
			<tbody>	
				<tr id="first">
					<td>1</td>
					<td class="left">Helsingborg</td>
					<td>18</td>
					<td>13</td>
					<td>3</td>
					<td>2</td>
					<td>30</td>
					<td>13</td>
					<td>42</td>
				</tr>
				<tr id="second">
					<td>2</td>
					<td class="left">Malmö FF</td>
					<td>18</td>
					<td>12</td>
					<td>3</td>
					<td>3</td>
					<td>34</td>
					<td>18</td>
					<td>39</td>
				</tr>
				<tr id="third">
					<td>3</td>
					<td class="left">Örebro</td>
					<td>18</td>
					<td>10</td>
					<td>2</td>
					<td>6</td>
					<td>25</td>
					<td>20</td>
					<td>32</td>
				</tr>
				<tr>
					<td>4</td>
					<td class="left">Elfsborg</td>
					<td>18</td>
					<td>8</td>
					<td>6</td>
					<td>4</td>
					<td>34</td>
					<td>23</td>
					<td>30</td>
				</tr>
				<tr>
					<td>5</td>
					<td class="left">Mjällby</td>
					<td>18</td>
					<td>7</td>
					<td>5</td>
					<td>6</td>
					<td>20</td>
					<td>15</td>
					<td>26</td>
				</tr>
				<tr>
					<td>6</td>
					<td class="left">Kalmar FF</td>
					<td>18</td>
					<td>6</td>
					<td>7</td>
					<td>5</td>
					<td>22</td>
					<td>23</td>
					<td>25</td>
				</tr>
				<tr>
					<td>7</td>
					<td class="left">IFK Göteborg</td>
					<td>18</td>
					<td>6</td>
					<td>6</td>
					<td>6</td>
					<td>27</td>
					<td>15</td>
					<td>24</td>
				</tr>
				<tr>
					<td>8</td>
					<td class="left">Gais</td>
					<td>18</td>
					<td>6</td>
					<td>6</td>
					<td>6</td>
					<td>16</td>
					<td>19</td>
					<td>24</td>
				</tr>
				<tr>
					<td>9</td>
					<td class="left">BP</td>
					<td>18</td>
					<td>6</td>
					<td>4</td>
					<td>8</td>
					<td>15</td>
					<td>20</td>
					<td>22</td>
				</tr>
				<tr>
					<td>10</td>
					<td class="left">Häcken</td>
					<td>18</td>
					<td>6</td>
					<td>4</td>
					<td>8</td>
					<td>20</td>
					<td>27</td>
					<td>22</td>
				</tr>
				<tr>
					<td>11</td>
					<td class="left">Trelleborg</td>
					<td>18</td>
					<td>6</td>
					<td>3</td>
					<td>9</td>
					<td>17</td>
					<td>27</td>
					<td>21</td>
				</tr>
				<tr>
					<td>12</td>
					<td class="left">Djurgården</td>
					<td>18</td>
					<td>5</td>
					<td>5</td>
					<td>8</td>
					<td>18</td>
					<td>24</td>
					<td>20</td>
				</tr>
				<tr>
					<td>13</td>
					<td class="left">Halmstad</td>
					<td>18</td>
					<td>6</td>
					<td>2</td>
					<td>10</td>
					<td>17</td>
					<td>25</td>
					<td>20</td>
				</tr>
				<tr id="thirdLast">
					<td>14</td>
					<td class="left">Gefle</td>
					<td>18</td>
					<td>5</td>
					<td>4</td>
					<td>9</td>
					<td>19</td>
					<td>24</td>
					<td>19</td>
				</tr>
				<tr id="secondLast">
					<td>15</td>
					<td class="left">AIK</td>
					<td>18</td>
					<td>5</td>
					<td>4</td>
					<td>9</td>
					<td>15</td>
					<td>21</td>
					<td>19</td>
				</tr>
				<tr id="last">
					<td>16</td>
					<td class="left">Åtvidaberg</td>
					<td>18</td>
					<td>3</td>
					<td>4</td>
					<td>11</td>
					<td>16</td>
					<td>31</td>
					<td>13</td>
				</tr>
			</tbody>
		</table>	
	</body>
</html>

Redigerat av Cluster, 11 augusti 2010 klockan 23:08.
Lagt till kodexempel


#3 Glenn H

Glenn H

    Användare

  • Medlemmar
  • PipPip
  • 42 inlägg

Postad 12 augusti 2010 klockan 15:58

Jag var inte färdig med den, det vara bara ett test, därför hade jag inte TH.

Tack för ditt svar, jag ska studera det och se vad jag kan lära mig. Det ser ju mkt proffsigare ut på ditt sätt.

Men går det inte att bara få dit en linje mellan?

#4 Cluster

Cluster

    Omniscient

  • Moderatorer
  • 7 989 inlägg

Postad 12 augusti 2010 klockan 16:08

Naturligtvis är det enkelt att få dit en linje, hoppades att det skulle framgå av mitt exempel ;)

Snabbt exempel med din bef. kod:
<style type="text/css">
	.bottomLine td { border-bottom:1px solid #F00; }
</style>

<table class="tabell_text_12" width="50%" cellspacing="0" cellpadding="0" border="0">
	<tr class="bottomLine">
		<td width="7%" align="center">Pos.</td>
		<td width="30%" align="left">Lag</td>
		<td width="7%" align="center">Ma</td>
		<td width="7%" align="center">Vi</td>
		<td width="7%" align="center">Oa</td>
		<td width="7%" align="center">Fö</td>
		<td width="7%" align="center">MF</td>
		<td width="7%" align="center">-</td>
		<td width="7%" align="center">MB</td>
		<td width="7%" align="center">Diff</td>
		<td width="7%" align="center">Po</td>
	</tr>
	<tr>
		<td width="7%" align="center">1</td>
		<td width="30%" align="left">Saturnus BK</td>
		<td width="7%" align="center">26</td>
		<td width="7%" align="center">17</td>
		<td width="7%" align="center">6</td>
		<td width="7%" align="center">3</td>
		<td width="7%" align="center">58</td>
		<td width="7%" align="center">-</td>
		<td width="7%" align="center">18</td>
		<td width="7%" align="center">40</td>
		<td width="7%" align="center">57</td>
	</tr>
</table>


#5 Glenn H

Glenn H

    Användare

  • Medlemmar
  • PipPip
  • 42 inlägg

Postad 12 augusti 2010 klockan 17:57

Tack så mkt, jag misstänkte att det skulle gå med nåt sånt, men jag fick aldrig till det på egen hand. Men jag blev så nöjd med det första du visade så jag håller mig till det :thumbsup:

#6 Cluster

Cluster

    Omniscient

  • Moderatorer
  • 7 989 inlägg

Postad 12 augusti 2010 klockan 19:01

Ok, kör hårt!
Tack för poäng :thumbsup:




0 användare läser detta ämne

0 medlemmar, 0 gäster, 0 anonyma medlemmar

 

Senaste trådarna

pc för alla Senaste nytt


Prenumerera på nyheter

Missa inte PC för Allas
smarta nyhetsbrev
Läs mer om nyhetsbreven här!
  PFA Express
  Veckans surftips
  Extreme
PC för Alla-nätverket