Kuinka lisätä välilyöntiä sarakkeiden väliin vaikuttamatta riveihin HTML-taulukossa?
Vasemman ja oikean täytön ominaisuuksia käytetään lisäämään sarakkeiden väliin vaikuttamatta taulukon yleiseen asetteluun. Tämän ominaisuuden avulla kehittäjät voivat lisätä ylimääräisiä välilyöntejä, eikä tämä välitys vaikuta riveihin.
Noudata alla olevia ohjeita:
Vaihe 1: Luo taulukkorakenne
Oletetaan, että HTML-tiedostossa on taulukko, joka sisältää neljä riviä ja kolme saraketta:
< pöytä >
< tr >
< th > Nimi < / th >
< th > Luokka < / th >
< th > Kaupunki < / th >
< / tr >
< tr >
< td > John < / td >
< td > BS Chem < / td >
< td > Lontoo < / td >
< / tr >
< tr >
< td > Aleksanteri < / td >
< td > BS Math < / td >
< td > Tokio < / td >
< / tr >
< tr >
< td > Joseph < / td >
< td > BS CS < / td >
< td > New York < / td >
< / tr >
< / pöytä >
Yllä olevan koodin suorittamisen jälkeen verkkosivu näyttää tältä:
Tulos vahvistaa, että taulukkorakenne on luotu.
Vaihe 2: Vaakasuoran pehmusteen lisääminen
Voit lisätä sarakkeiden väliin vasemmalta puolelta ' pehmuste-vasen ”CSS-ominaisuus. Tämän ominaisuuden käyttöönoton jälkeen tiedot näyttävät oikealta tasaukselta. Syynä on, että pehmuste levitetään vain vasemmalta puolelta.
Valitse nyt 'td'-elementti niiden tyylien CSS-osiosta, joita voidaan käyttää inline-menetelmällä. Lisää sitten täyte 50 pikseliä ' lisätäksesi välilyöntejä ja lisätäksesi reunusominaisuuden paremman visualisoinnin vuoksi:
td {täyte-vasen: 50px;
rajaa : 2px tasainen punainen;
}
Koodin suorittamisen jälkeen verkkosivu näyttää tältä:
Tulos näyttää, että taulukon sarakkeiden väliin on lisätty väli.
Nyt, jos haluat asettaa pehmusteen oikealta puolelta, ' pehmuste-oikea ”kiinteistö on käytössä. Samalla tavalla, mutta nyt solutiedot näyttävät ' vasemmalle tasattuna ”. Koodi on:
td {täyte-vasen: 50px;
rajaa : 2px tasainen punainen;
}
Yllä olevan koodin suorittamisen jälkeen verkkosivu näyttää tältä:
Tulos vahvistaa, että sarakkeiden välistä tilaa kasvatetaan lisäämällä oikealle puolelle pehmustetta.
Vaihe 3: Vasemman ja oikean täytteen yhdistelmä
Kuten yllä olevassa vaiheessa, tietoja ei ole kohdistettu keskelle molemmissa tapauksissa, mikä tekee tiedoista epäammattimaista. Tehdä siitä näkyvä rikkomatta suunnittelun järkeä. Molempia ominaisuuksia voidaan hyödyntää samanaikaisesti seuraavasti:
td {täyte-oikea: 60px;
täyte-vasen: 60px;
rajaa : 2px tasainen punainen;
}
Yllä olevan koodin suorittamisen jälkeen verkkosivu näyttää tältä:
Tulos vahvistaa, että sarakkeiden väliin on lisätty tilaa ja tiedot myös tasataan keskelle.
Johtopäätös
Taulukon sarakkeiden välistä tilaa voidaan lisätä vasemmalle ja oikealle täytetyillä ominaisuuksilla. Nämä ominaisuudet lisäävät soluun lisätilaa oikeasta ja vasemmasta suunnasta. Molempia ominaisuuksia voidaan käyttää samanaikaisesti tai erikseen. Tämä artikkeli on osoittanut onnistuneesti, kuinka voit lisätä välilyöntejä taulukon sarakkeiden väliin vaikuttamatta riveihin.