Jak nastylovat losovací tabulku? – CSS – Fórum – Programujte.com

Dobrý den,
mám obyčejnou tabulku a mám z ní udělat:

http://www.hafnarfjordur.cekuj.net/wp-content/uploads/2010/11/Pavouk.jpg

Nejvíce přemýšlím nad tím, že se vykašlu na border a hodím do td nějaký obrázek s čárami. Jde mi hlavně o širokou podporu prohlížečů... Tedy mám jména soutěžících v prvním sloupci tabulky (každé jméno ohraničeno ze 4 stran - v cíli má být jméno nad jednou čarou) a další zápasy jsou již ve větších buňkách - pracuji s colspan a rowspan - kde buňka pro cílový zápas zabírá již všechny řádky. Demo můžete zkusit zde:

laman.webz.cz/pairing.php

Jak byste dosáhli (klidně i mimo tabulku a CSS) kýženého výsledku?
Děkuji.

1A
cara nahore + prazdna bunka, cara vlevo + prazdna
4B, cara vlevo a nahore + prazdna, cara vlevo

...

Mimochodem, ta stranka ma spatne css. Kdyz zmensis risku okna, abys musel menu rolovat doprava, doleva, tak se to neda a pulka menu treba neni videt.

#3 peter
Ta stránka není moje - svou nedávám, poněvadž chráním soukromá data... (Ale principem to mám takto.) Z tvého příspěvku vážně netuším, co mám psát do CSS/... Důležitá věc - zákazník to chce tisknout na A4. Pročež to ani nemusí být HTML - potřebuji jen nějak dostat z databáze onoho pavouka... Zákazník si prý s HTML poradí - tak mne napadla tabulka. Vše funguje - mám v PHP algoritmus, který dovede správně seřadit jména a vytvořit zápasový modul - potřebuji to jen nějak zobrazit k tisku...

To zalezi na tom, jak mas nastaveny prohlizec. Mi se treba stalo pri zobrazeni struktury, ze mi to pri tisku nevytisklo css. Takze by mozna bylo nejlepsi jit do obrazku, pokud to ma jit jako css.
Tak, ten popis jsem se snazil zestrucnit. Carky oddeluji bunky a to ostatni je popis css nastaveny na te bunce.
Cara vlevo nahore se preklada treba jako class = c1, .c1 {border-top:1px solid #f00; border-left:1px solid #f0f;}
Zkus, jestli se ti tohle vytiskne v prohlizecich, ktere pouzivaji lide, pro ktere pavouk je.
http://www.slu.cz/…okove-schema

Přátelé na facebooku jsou jak propisky. Máš jich čtyři sta, ale píšou ti tak tři.

#5 peter
Klidně budu generovat PNG, PDF, PostScript - cokoliv. Mám v PHP jména a počet buněk ke spojení - stačí mi jen vědět, co z toho vygenerovat... (Aby to dalo tu A4/se nějak stránkovalo.) Mohu kreslit do plátna - mohu cokoliv. Jen nevím jak nejefektivněji generovat pavouka na stránku/stránky... Cíl mise je ten obrázek nahoře.

	while($row = $statement->fetch(PDO::FETCH_ASSOC))
		$member[] = "${row["name"]} (${row["grope"]})";

	$rank = 0;
	$header = "";
	$player = array(1);
	$kicked = array(10000);
	$memberCount = count($member);
	$roundCount = ceil(log($memberCount) / log(2));
	$round = array("čtvrtfinále", "semifinále", "finále", "vítěz");

	for ($index = 0; $index < $roundCount; $index++)
		for ($index2 = 0; $index2 < count($player); $index2 += 2)
			array_splice($player, $index2 + 1, 0, $player[$index2] + pow(2, $index));

	$playerCount = count($player);

	for ($index = 0; $index < $playerCount - 1; $index++)
		if ($player[$index] <= $playerCount - $memberCount)
		{
			$nextIndex = $index + 1;

			for ($index2 = 0; $index2 < count($kicked) + 1; $index2++)
				if ($kicked[$index2] > $player[$nextIndex])
				{
					array_splice($kicked, $index2, 0, $player[$nextIndex]);
					break;
				}

			$player[$nextIndex] = 0xFFFF;
		}

	for ($index = 0; $index < count($kicked); $index++)
		array_splice($member, $kicked[$index] - 1, 0, "");

	for ($index = 0; $index < $roundCount + 1; $index++)
		$header = "<th>".(count($round) > 0 ? array_pop($round)."</th>" : ($roundCount + 1 - $index).". kolo</th>").$header;

	echo "<table id='bracket'><tr>", $header, "</tr>";

	for ($index = 0; $index < $playerCount; $index++)
	{
		if ($player[$index] == 0xFFFF)
			continue;

		$argument = "";
		$index2 = $playerCount - $index;

		if ($player[$index + 1] == 0xFFFF)
			$argument = " colspan=\"2\"";

		echo "<tr><td$argument><span class=\"rank color", $rank++ % 2, "\">", $rank, "</span>", $member[$player[$index] - 1], "</td>";

		while ($index2 % 2 == 0)
		{
			$argumentValue = 2 * ($playerCount - $index) / $index2;
			$l = $index + $argumentValue;

			for ($k = $index; $k < $l; $k++)
				if ($player[$k] == 0xFFFF)
					$argumentValue--;

			if ($index2 != $playerCount - $index || !$argument)
				echo '<td rowspan="', $argumentValue, '"></td>';

			$index2 /= 2;
		}

		echo "</tr>";
	}

	echo "</table>";

K tomu php kodu bych mel sice par pripominek (treba echo nahradit promennymi), ale v tematu css je to off topic.
Vygeneruj tabulku, pak to ostyluj a uvidis, na jaka mista v php co dopsat. Velmi nadejne se da Pouzivat modulo (%) a rotace (>> <<) nebo nasobeni, deleni (* /)... radku%((2+sloupec)<<1) nebo radku%((2+sloupec)*2)

Ptal ses, jak to ostylovat. Css zadnou tabulku generovat neumi.

Ted mne jeste napada, ale zatim jsem to pouzil jen na sude liche radky, ze by to slo v html5 pres css pomoci vzorcu pro n-child.

Uf, dneska more placene prace. Mozna zitra na to mrknu, jestli by se to dalo ciste v css, kdyz bych mel tabulku :)
pro google bych pouzil slova: match chart, Single-Elimination List
http://www.aropupu.fi/bracket/
http://stackoverflow.com/…nament-table

#10 peter
Však tabulku mám... Chci multiplatformní řešení - CSS3 věci nepodporuje nějak moc prohlížečů... (Především právě selektory.)

Tak, kdyz to nechces v css3, tak to pak klasicky temi dvema-tremi tridami, co jsem ti vypsal, jake vlastnosti ma kazda mit uz v prvnim prispevku.