Kā pievienot atstarpi starp kolonnām, neietekmējot rindas HTML tabulā?
Polsterējuma kreisās un labās puses rekvizīti tiek izmantoti, lai pievienotu atstarpi starp kolonnām, neietekmējot kopējo tabulas izkārtojumu. Šis rekvizīts ļauj izstrādātājiem pievienot papildu atstarpes, un šīs atstarpes neietekmē rindas.
Veiciet tālāk norādītās darbības.
1. darbība: izveidojiet tabulas struktūru
Pieņemsim, ka HTML failā ir tabula, kurā ir četras rindas un trīs kolonnas:
< tabula >
< tr >
< th > Vārds < / th >
< th > Klase < / th >
< th > Pilsēta < / th >
< / tr >
< tr >
< td > Džons < / td >
< td > BS Chem < / td >
< td > Londona < / td >
< / tr >
< tr >
< td > Aleksandrs < / td >
< td > BS matemātika < / td >
< td > Tokija < / td >
< / tr >
< tr >
< td > Jāzeps < / td >
< td > BS CS < / td >
< td > Ņujorka < / td >
< / tr >
< / tabula >
Pēc iepriekš minētā koda izpildes tīmekļa lapa izskatās šādi:
Izvade apstiprina, ka ir izveidota tabulas struktūra.
2. darbība. Horizontālā polsterējuma uzlikšana
Lai pievienotu atstarpi starp kolonnām no kreisās puses, izmantojiet ' polsterējums-pa kreisi CSS īpašums. Pēc šī rekvizīta lietošanas dati izskatās kā pareizais līdzinājums. Iemesls ir tāds, ka polsterējums tiek uzklāts tikai no kreisās puses.
Tagad atlasiet elementu “td” to stilu CSS daļā, kurus var lietot, izmantojot iekļauto metodi. Pēc tam pievienojiet polsterējumu “ 50 pikseļi ”, lai labākas vizualizācijas nolūkos pievienotu atstarpi un apmales rekvizītu:
td {polsterējums pa kreisi: 50 pikseļi;
robeža : 2 pikseļi vienkrāsains sarkans;
}
Pēc koda izpildes tīmekļa lapa izskatās šādi:
Izvade parāda, ka starp tabulas kolonnām ir pievienota atstarpe.
Tagad, lai iestatītu polsterējumu no labās puses, “ polsterējums-pa labi ” īpašums tiek izmantots. Tādā pašā veidā, bet tagad šūnu dati izskatās ' līdzinājums pa kreisi ”. Kods ir:
td {polsterējums pa kreisi: 50 pikseļi;
robeža : 2 pikseļi vienkrāsains sarkans;
}
Pēc iepriekš minētā koda izpildīšanas tīmekļa lapa izskatās šādi:
Izvade apstiprina, ka atstarpe starp kolonnām tiek palielināta, labajā pusē uzliekot polsterējumu.
3. darbība: kreisās un labās puses polsterējuma kombinācija
Tāpat kā iepriekš minētajā darbībā, abos gadījumos dati nav līdzināti centrā, un tas padara datus neprofesionālus. Padarīt to pamanāmu, nepārkāpjot dizaina jēgu. Abas īpašības var izmantot vienlaikus, kā norādīts tālāk:
td {polsterējums pa labi: 60 pikseļi;
polsterējums pa kreisi: 60 pikseļi;
robeža : 2 pikseļi vienkrāsains sarkans;
}
Pēc iepriekš minētā koda izpildīšanas tīmekļa lapa izskatās šādi:
Izvade apstiprina, ka starp kolonnām ir pievienota atstarpe, un dati ir arī līdzināti centrā.
Secinājums
Atstarpi starp tabulas kolonnām var pievienot, izmantojot kreisās un labās puses rekvizītus. Šie rekvizīti pievieno šūnai papildu vietu no labās un kreisās puses. Abus īpašumus var izmantot vienlaikus vai atsevišķi. Šajā rakstā ir veiksmīgi parādīts, kā pievienot atstarpes starp tabulas kolonnām, neietekmējot rindas.