Just nu i M3-nätverket
Jump to content
Glenn H

Röd linje i tabell

Recommended Posts

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>

Share this post


Link to post
Share on other sites

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>

Edited by Cluster
Lagt till kodexempel

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites

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>

Share this post


Link to post
Share on other sites

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:

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now



×