Keskustelu: Nettisivujen teko: HTML: Taulukon sarakkeen erotusviivan leveys

Elikkäs miten saan kyseisen leveyden muutettua tai saako sitä muutettua ollenkaan...toinen vaohtoehto olisi lisätä samaan kohtaan ylsinkesrtaisiesti viiva, mutta se ei taida olla mahdollista

Kiitos kaikesta avusta :D

Käytä CSS-määreitä border-collapse ja border-spacing.

Riippuu aika lailla siitä, mitä tarkoitat taulukon sarakkeen erotusviivalla ja miten viiva on nyt tehty.

Oletetaan, että lähtökohtana on täysin tyylittelemätön taulukko:

<table class=demo>
<tr><td>foo<td>bar
<tr><td>foo<td>bar
</table>

Jos halutaan sarakkeiden väliin viiva, voidaan käyttää esimerkiksi seuraavaa CSS-koodia:

table.demo { border-collapse: collapse; }
.demo td:first-child { border-right: double 0.2em #070; }

Viivan leveyden ilmaisee tässä 0.2em. Sen tilalle voi kirjoittaa toki myös jotain pikselimääräistä, kuten 5px, ellei halua, että viivan leveys on suhteessa fonttikokoon.

(Jos homman pitää toimia myös todella vanhoissa selaimissa, jotka eivät tue :first-child-pseudoelementtiä, pitää lisätä sarakkeen jokaiseen soluun class-määrite ja käyttää luokkaselektoria.)

Tässä ensimmäinen sääntö huolehtii siitä, että taulukon solut ovat kiinni toisissaan (ja vierekkäisten solujen reunaviivat yhtyvät). Ilman sitä viiva katkeaa aina taulukon rivin vaihtuessa.

Sitä en ymmärrä, miten viivan leventämisen vaihtoehtona olisi viivan lisääminen samaan kohtaan – tarkoitatko kaksoisviivaa? Sen saa aikaan avainsanalla double, esimerkiksi

border-right: double 0.2em #070

Juu elikkä haluan nii, että mulla on taulukko missä on 2 saraketta ja yksi rivi...ja haluan, että sarakkeiden välinen viiva näkyy, mutta muut taulukon viivat eivät....jos tuo nyt oli selvemmin selitetty :D

Laita taulukon soluille eri classit ja asetat eri classeille erikseen miten mitkäkin reunaviivat (border-top, border-left, border-right, border-bottom) näkyvät.

Lebe80 kirjoitti:

Laita taulukon soluille eri classit ja asetat eri classeille erikseen miten mitkäkin reunaviivat (border-top, border-left, border-right, border-bottom) näkyvät.

Eli mihin laitan ja mitä koodia?

tsk955 kirjoitti:

Juu elikkä haluan nii, että mulla on taulukko missä on 2 saraketta ja yksi rivi...ja haluan, että sarakkeiden välinen viiva näkyy, mutta muut taulukon viivat eivät....jos tuo nyt oli selvemmin selitetty :D

Eikös tuo ole vielä yksinkertaisempi tapaus kuin se, jolle esitin ratkaisun? Kun on vain yksi rivi, ei tarvita border-collapse-ominaisuutta.

Yucca kirjoitti:

<table class=demo>
<tr><td>foo<td>bar
<tr><td>foo<td>bar
</table>

Onko tuo nyt mielestäsi paras tapa esittää HTML taulukkoa? Tiedän että HTML5 sitä ja HTML5 tätä, mutta onko tuo nyt kuitenkaan kaikista selkein tapa. Ilmeisesti kun on riittävän hifi, niin pitää jättää lopettavat tagit taulukoistakin pois.

Puhdasta vittuiluahan tuo Yucan esittämä roska oli, ei sitä kannata tosissaan ottaa.

The Alchemist kirjoitti:

Puhdasta vittuiluahan tuo Yucan esittämä roska oli, ei sitä kannata tosissaan ottaa.

Housuissas on roskaa. Oliko tarkoituksesi vain esittää ”väärin ratkaistu”, koska merkkaus ei ollut uskontosi mukaista?

Koodi on kaikkien HTML:n määrittelyjen mukaista (siis sellaisten, missä ylipäänsä on taulukot), pois lukien XHTML. Jos joku haluaa käyttää XHTML:ää, niin hänen kyllä pitää osata ihan itse laittaa paikoilleen XHTML:n vaatimat lisäkuviot.

Mitä tulee itse aiheeseen, niin tämä kuulostaa aika epäilyttävästi siltä, että tässä ollaan yrittämässä kahden vierekkäisen palstan tekoa taulukolla. Jätän siitä marmattamisen jonkun muun tehtäväksi.

Mitä tulee HTML:n kirjoittamiseen, niin omaksi huvikseen voi kirjoitella sulkemattomia tageja. Muille jaetussa koodissa ja varsinkin työelämässä ne sulkevat tagit on pakollisia. Se ei ole uskontokysymys, mielipidekysymys tai periaatekysymys, vaan käytäntöjen sanelemaa todellisuutta.

Mielipidepuolelta voin todeta, että sulkemattomien tagien säännöt ovat varsin epäyhtenäiset. Meinaan tällä sitä, että pitää opiskella erikseen, jotta tietää mitkä elementit saa jättää sulkematta. Jos en asiasta nyt mainitsisi, niin tietäisittekö...

... että tämä ei ole validi:

<!DOCTYPE html>
<html>
<meta charset="utf-8">
<title>Testi
<h1>Otsikko
<p>Kappale 1
<p>Kappale 2

... mutta tämä on validi:

<!DOCTYPE html>
<html>
<meta charset="utf-8">
<title>Testi</title>
<h1>Otsikko</h1>
<p>Kappale 1
<p>Kappale 2

Ja siksitoisekseen tuosta koodista ei varmasti kaikille käy ilmi, että lopullisen sivun puu näyttää (tai pitäisi näyttää) selaimessa tältä:

<!-- esitetty XHTML:nä luettavuussyistä -->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>Testi</title>
	</head>
	<body>
		<h1>Otsikko</h1>
		<p>Kappale 1</p>
		<p>Kappale 2</p>
	</body>
</html>

Kaikki selaimet ei vaan osaa toimia tämän kanssa... muistaakseni ainakin IE bugittaa sivun tyylien kanssa, mikäli head- ja body-elementit puuttuvat sivun syntaksista. On vaan paljon järkevämpää, ettei oiota mutkia vain muutaman säästetyn merkin tähden, vaikka kuinka oltaisiin määrittelyjen mukaan oikeaoppisia. Omaksi huviksi yks hailee, muille opettaessa taas pitää kantaa vähän vastuuta.

Yucca kirjoitti:

The Alchemist kirjoitti:

Puhdasta vittuiluahan tuo Yucan esittämä roska oli, ei sitä kannata tosissaan ottaa.

Housuissas on roskaa. Oliko tarkoituksesi vain esittää ”väärin ratkaistu”, koska merkkaus ei ollut uskontosi mukaista?

Sanoin sen olevan vittuilua, en väärin. Juuri se, että raiskaat syntaksia vain saadaksesi pelleillä/egoilla validilla merkkauksella, tekee siitä vittuilua. Eihän kukaan tuollaista roskaa kirjoittaisi, jos haluaisi tulla otetuksi vakavasti.