Just nu i M3-nätverket
Gå till innehåll

Röd linje i tabell


Glenn H

Rekommendera Poster

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>

Länk till kommentar
Dela på andra webbplatser

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>

Länk till kommentar
Dela på andra webbplatser

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?

Länk till kommentar
Dela på andra webbplatser

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>

Länk till kommentar
Dela på andra webbplatser

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:

Länk till kommentar
Dela på andra webbplatser

Arkiverat

Det här ämnet är nu arkiverat och är stängt för ytterligare svar.

×
×
  • Skapa nytt...