Lernu kiel krei CSS-tablan limon en nur kvin minutoj
Vi eble aŭdis, ke CSS kaj HTML-tabloj ne miksas. Ĉi tio simple ne estas vera. Jes, uzante HTML- tabulojn por aranĝo ne plu estas reela dezajno de la retejo, anstataŭita de CSS-aranĝaj stiloj, sed tabloj estas ankoraŭ la ĝusta marko uzi por aldoni tabulajn datumojn al retpaĝo.
Bedaŭrinde, ĉar tiom da profesiaj retejo malproksimiĝis de tabloj pensante, ke ili estas venenaj, multaj el tiuj profesiuloj havas malmultan sperton laborante kun ĉi tiu komuna HTML-elemento kaj la lukto kiam ili devas manipuli ilin en retpaĝo. Ekzemple, se vi havas tablon en paĝo kaj vi volas aldoni internajn liniojn al la tabeloj.
CSS Tablo Limoj
Kiam vi uzas CSS por aldoni limojn al tabloj, ĝi nur aldonas la limon ĉirkaŭ la ekstera de la tablo. Se vi volas aldoni internajn liniojn al la individuaj ĉeloj de tiu tablo, vi devas aldoni limojn al la internaj CSS-elementoj. Vi ankaŭ povas uzi la HR-etikedon por aldoni liniojn ene de individuaj ĉeloj.
Por apliki la stilojn kovritajn en ĉi tiu artikolo, vi devus evidente havi tablon en via retpaĝo. Vi tiam devas krei stilon kiel interna stilo-folio en la kapo de via dokumento (verŝajne nur faru tion se via "retejo" estas sola paĝo) aŭ alfiksita al la dokumento kiel ekstera stilo-folio (jen vi faros se via retejo estas multnombraj paĝoj - permesante al vi stili ĉiujn paĝojn de unu ekstera folio). Vi metos la stilojn por aldoni internajn liniojn en tiun stilon.
Antaŭ Vi Komenci
Unue vi devas decidi, kie vi volas, ke la linioj aperu en via tablo. Vi havas plurajn eblojn, inkluzive:
- Ĉirkaŭi ĉiujn ĉelojn por formi kradon;
- Metante la liniojn inter nur la kolumnoj;
- Nur inter la vicoj; aŭ
- Inter specifaj kolumnoj aŭ vicoj.
Vi povas ankaŭ poziciigi la liniojn ĉirkaŭ individuaj ĉeloj aŭ ene de individuaj ĉeloj.
Kiel aldoni liniojn ĉirkaŭ ĉiuj ĉeloj en tablo
Por aldoni liniojn ĉirkaŭ ĉiuj ĉeloj en via tablo, kreante tiun kradon kiel efikon, aldonu la jenan al via stilo-folio:
td, th {
limo: solida 1px nigra;
}
Kiel aldoni liniojn inter nur la kolumnoj en tabelo
Por aldoni liniojn inter la kolumnoj (tio kreas vertikalajn liniojn, kiuj kuras de supre malsupre sur la kolumnoj de la tablo), aldonu la jenan al via stilo-folio:
td, th {
limo-maldekstra: solida 1px nigra;
}
Tiam, se vi ne volas, ke ili aperos en la unua kolumno, vi bezonos aldoni klason al tiuj ĉeloj kaj ĉeloj. En ĉi tiu ekzemplo, ni supozas, ke ni havas klason de ne-limo sur tiuj ĉeloj kaj ni forigas la limon kun ĉi tiu pli specifa CSS-regulo. Do jen la HTML-klaso, kiun ni uzus:
klas = "ne-limo">
Kaj tiam ni povus aldoni la sekvan stilon al nia stilo folio:
. Ne-limo {
limo-maldekstra: neniu;
}
Kiel aldoni liniojn inter nur la radoj en tablo
Kiel aldonante liniojn inter la kolumnoj, vi povas fari tion per nur unu simpla stilo aldonita al via stilo-folio. La sube CSS aldonus vertikalajn liniojn inter ĉiu vico de nia tablo:
tr {
limo-fundo: solida 1px nigra;
}
Kaj por forigi la limon de la malsupro de la tablo, vi denove aldonus klason al tiu tr-etikedo:
klas = "ne-limo">
Aldonu la sekvan stilon al via stilo-folio:
. Ne-limo {
limo-fundo: neniu;
}
Kiel aldoni liniojn inter specifaj kolumnoj aŭ vicoj en tabelo
Se vi nur volas liniojn inter specifaj vicoj aŭ kolumnoj, vi devas uzi klason sur tiuj ĉeloj aŭ vicoj. Aldonante linio inter kolumnoj estas iomete pli malfacila ol inter vicoj ĉar vi devas aldoni la klason al ĉiu ĉelo en tiu kolumno. Se via tablo estas aŭtomate generita de CMS de iu speco , ĉi tio eble ne eblas, sed se vi estas mano kodante la paĝon, vi povus aldoni taŭgajn klasojn kiel bezonas por atingi ĉi tiun efekton.
klaso = "bordo">
Aldonante liniojn inter vicoj estas multe pli facila, ĉar vi povas simple aldoni la klason al la vico, kiun vi volas.
klaso = "limo-fundo">
Poste aldonu la CSS al via stilo-folio:
.bordo-flanko {
limo-maldekstra: solida 1px nigra;
}
.bordo-fundo {
limo-fundo: solida 1px nigra;
}
Kiel aldoni liniojn ĉirkaŭ individuaj ĉeloj en tablo
Por aldoni liniojn ĉirkaŭ individuaj ĉeloj, vi aldonas klason al la ĉeloj, kiujn vi volas ĉirkaŭe:
klaso = "limo">
Kaj poste aldonu la sekvan CSS al via stilo folio:
.bordo {
limo: solida 1px nigra;
}
Kiel aldoni liniojn en individuaj ĉeloj en tablo
Se vi volas aldoni liniojn ene de la enhavo de ĉelo, la plej facila maniero fari ĉi tion estas kun la horizontala regulo etikedo (
).
Utilaj Konsiletoj
Se vi rimarkas makulojn en viaj limoj, vi devas certigi, ke la limo-kolapso stilo estas metita sur via tablo. Aldonu la jenan al via stilo-folio:
tablo {
limo-kolapso: kolapso;
}
Vi povas eviti ĉiujn ĉi supre CSS kaj uzi la landliman atributon en via tablo etikedo. Konsideru, tamen, ke lia atributo, kvankam ne senkulpigita, estas multe malpli fleksebla ol CSS, ĉar vi povas nur difini la larĝecon de la limo kaj nur povas havi ĝin ĉirkaŭ ĉiuj ĉeloj de la tablo aŭ neniu.