HTML-taulukkotunnisteet - Opi esimerkkejä HTML-taulukkotunnisteista syntaksin avulla

• Johdanto HTML-taulukkotunnisteisiin

Johdanto HTML-taulukkotunnisteisiin

HTML-taulukko tarjoaa tavan johtaa tai määritellä tietoja, kuten tekstiä, kuvia, linkkejä jne. Solurivien ja -sarakkeiden muodossa. HTML-taulukot voidaan luoda käyttämällä

tag. Oletuksena taulukkotiedot on kohdistettu. Tässä aiheessa aiomme oppia HTML-taulukkotunnisteista.

Taulukko voidaan luoda käyttämällä

tunnisteita.

tag määrittelee taulukkorivit, joita käytetään rivin tekemiseen.

Taulukkotiedot voidaan rakentaa sisälle

,	ja
tag määrittelee taulukon otsikon.	-tagi määrittelee taulukon tietosolut, joita käytetään sarakkeen tekemiseen.

taulukon sisältö lukuisilla pöytäelementeillä.

Syntaksi

Taulukon otsikko 1	Taulukon otsikko 2
Datasolu 1	Datasolu 2
Datasolu 3	Datasolu 4

Esimerkkejä HTML-taulukkotunnisteista

Tässä on esimerkkejä alla olevista HTML-taulukkotunnisteista

1. Pöydän peruskäyttö



HTML Table Tag Usage



Nimi	Maa
Dhoni	Intia
David Miller	Etelä-Afrikka
Joe Root	Englanti

Tallenna koodi .html-tunnisteella ja avaa se selaimessa. Se näyttää seuraavan tuloksen:

2. Taulukon otsikko

Taulukon kuvateksti voidaan määrittää < kuvateksti > -tunnisteen avulla.

esimerkki



HTML Table Tag Usage



Tämä on taulukon kuvateksti

Nimi	Maa
Dhoni	Intia
David Miller	Etelä-Afrikka
Joe Root	Englanti

Yllä oleva koodi näyttää alla olevan tuotoksen:

3. Taulukon solujen väli

Taulukon solujen tila voidaan määritellä käyttämällä cellpacing -määritettä. Cellpacing -attribuutti määrittelee taulukkosolujen välisen tilan.

esimerkki



HTML Table Tag Usage



Nimi	Maa
Dhoni	Intia
David Miller	Etelä-Afrikka
Joe Root	Englanti

Yllä oleva koodi näyttää seuraavan tulosteen:

4. Pöytäsuodatin

Taulukon solujen täyte voidaan määrittää käyttämällä solun täyttö -määritettä. Solun täyttöominaisuuden etäisyys taulukon solun reunan ja datan välillä.

esimerkki



HTML Table Tag Usage



Nimi	Maa
Dhoni	Intia
David Miller	Etelä-Afrikka
Joe Root	Englanti

Yllä oleva koodi näyttää alla olevan tuotoksen:

5. Sarakkeen ja rivin span ominaisuudet

Kaksi tai useampaa taulukkoriviä voidaan yhdistää yhdeksi riviksi käyttämällä rivivälin määritystä ja taulukon sarakkeet voidaan yhdistää yhdeksi sarakkeeksi käyttämällä colspan-määrittettä.

esimerkki



HTML Table Tag Usage



Yksi sarake	Sarake kaksi	Kolmas sarake
Rivi yksi	2. rivi	Kolmas rivi
	Neljäs rivi	Rivi viisi
Rivi kuusi

Koodi näyttää seuraavan tulosteen:

6. Taulukko

Taulukon tausta voidaan luoda käyttämällä bgcolor-määrite. Taulukon solun reuna voidaan määrittää raja-väri-määritteellä.

esimerkki



HTML Table Tag Usage



Nimi	Maa
Dhoni	Intia
David Miller	Etelä-Afrikka
Joe Root	Englanti

Suorita yllä oleva koodi ja se näyttää seuraavan tuloksen:

7. Pöydän korkeus ja leveys

Taulukon korkeus ja leveys voidaan asettaa leveys- ja korkeusmääritteillä.

esimerkki



HTML Table Tag Usage



Nimi	Maa
Dhoni	Intia
David Miller	Etelä-Afrikka
Joe Root	Englanti

Yllä oleva koodi näyttää seuraavan tulosteen:

8. Pöytäsolujen muotoilu

esimerkki



HTML Table Tag Usage

table, th, td (
border: 1px solid red;
border-collapse: collapse;
)
th, td (
padding: 15px;
)
table#mytable tr:nth-child(even) (
background-color: #FAD7A0;
)
table#mytable tr:nth-child(odd) (
background-color: #E67E22;
)
table#mytable th (
color: white;
background-color: teal;
)



Nimi	Maa
Dhoni	Intia
David Miller	Etelä-Afrikka
Joe Root	Englanti

Suorita yllä oleva koodi, sinulla on alla oleva lähtö:

8. Sisäkkäiset taulukot

Voit käyttää yhtä taulukkoa toisen taulukon sisällä, jota kutsutaan sisäkkäiseksi taulukkoksi.

Tarkastellaan alla olevaa esimerkkiä sisäkkäisestä taulukosta:

esimerkki



HTML Table Tag Usage



Nimi Maa Dhoni Intia David Miller Etelä-Afrikka Joe Root Englanti

Yllä oleva koodi näyttää seuraavan tulosteen:

Taulukon ominaisuudet

• tasaa: Tämä ominaisuus tarjoaa sisällön kohdistuksen elementin sisällä.
• bgcolor: Tämä ominaisuus määrittelee taulukon taustavärin.
• reunus: Tämä ominaisuus määrittelee taulukkosolujen reunan.
• solujen täyttö : Tämä ominaisuus näyttää täytön taulukon solujen ja taulukon sisällön välillä.
• cellpacing: Tämä ominaisuus näyttää tilan taulukon solujen välillä.
• kehys: Se määrittelee mitkä ulkorajojen osat ovat näkyvissä.
• säännöt: Tämä määrittelee mitkä sisärajojen osat ovat näkyvissä.
• lajiteltava: Tämä ominaisuus ilmoittaa, että taulukko on lajiteltavissa.
• yhteenveto: Se antaa, minkä tyyppinen taulukon sisältö on läsnä.
• leveys: Tämä ominaisuus kertoo taulukon leveyden.
• korkeus: Tämä ominaisuus määrittelee taulukon korkeuden.

johtopäätös

Toistaiseksi olemme tutkineet HTML-tyyppisiä taulukkotunnisteita. Esimerkit ovat osoittaneet käytön taulukon muotoilussa, yhden pöydän sijoittamisessa toiseen taulukkoon, pöydän korkeuden ja leveyden asettamiseen, etäisyyden ja pehmusteiden lisäämiseen taulukon soluihin, taustavärin asettamiseen taulukkoon ja monelle muulle.

Suositellut artikkelit

Tämä on opas HTML-taulukkotunnisteisiin. Tässä keskustellaan esimerkkejä HTML-taulukkotunnisteista taulukon syntaksin ja määritteiden kanssa. Saatat myös katsoa seuraavia artikkeleita saadaksesi lisätietoja -

1. HTML-muotoelementit
2. Luo taulukot HTML-muodossa
3. HTML-kuvatunnisteet
4. Mikä on HTML
5. HTML-kehykset
6. HTML-esteet
7. Aseta taustaväri HTML-muodossa esimerkillä