Com afegir espai entre columnes sense afectar les files d'una taula HTML?
Les propietats de farciment esquerra i dreta s'utilitzen per afegir espais entre columnes sense afectar la disposició general de la taula. Aquesta propietat permet als desenvolupadors afegir espais addicionals i aquest espai no afecta les files.
Seguiu els passos següents:
Pas 1: creeu una estructura de taula
Suposem que hi ha una taula al fitxer HTML que conté quatre files i tres columnes:
< taula >
< tr >
< th > Nom < / th >
< th > Classe < / th >
< th > ciutat < / th >
< / tr >
< tr >
< td > Joan < / td >
< td > BS Chem < / td >
< td > Londres < / td >
< / tr >
< tr >
< td > Alexandre < / td >
< td > Matemàtiques BS < / td >
< td > Tòquio < / td >
< / tr >
< tr >
< td > Josep < / td >
< td > BS CS < / td >
< td > Nova York < / td >
< / tr >
< / taula >
Després d'executar el codi anterior, la pàgina web té aquest aspecte:
La sortida confirma que s'ha creat una estructura de taula.
Pas 2: aplicació del farciment horitzontal
Per afegir espai entre columnes des del costat esquerre, utilitzeu ' farciment-esquerra ”Propietat CSS. Després d'aplicar aquesta propietat, les dades semblen l'alineació correcta. El motiu és que el farciment només s'aplica des del costat esquerre.
Ara seleccioneu l'element 'td' a la part CSS dels estils que es poden aplicar mitjançant el mètode en línia. A continuació, afegiu un farciment de ' 50 píxels ” per afegir espai i afegir propietats de vora per a una millor visualització:
td {farciment-esquerra: 50px;
frontera : 2px vermell sòlid;
}
Després d'executar el codi, la pàgina web té aquest aspecte:
La sortida mostra que l'espai s'afegeix entre les columnes de la taula.
Ara, per configurar el farciment des del costat dret, el ' farciment-dreta s'utilitza la propietat. De la mateixa manera, però ara les dades de la cel·la semblen ' alineat a l'esquerra ”. El codi és:
td {farciment-esquerra: 50px;
frontera : 2px vermell sòlid;
}
Després d'executar el codi anterior, la pàgina web té aquest aspecte:
La sortida confirma que l'espai entre les columnes s'incrementa aplicant el farciment al costat dret.
Pas 3: combinació de farciment esquerre i dret
Com en el pas anterior, les dades no estan alineades al centre en ambdós casos i això fa que les dades siguin poc professionals. Per fer-lo destacat sense trencar el sentit del disseny. Ambdues propietats es poden utilitzar al mateix temps com a continuació:
td {farciment-dreta: 60px;
farciment-esquerra: 60px;
frontera : 2px vermell sòlid;
}
Després d'executar el codi anterior, la pàgina web té aquest aspecte:
La sortida confirma que s'afegeix l'espai entre les columnes i que les dades també estan alineades al centre.
Conclusió
L'espai entre les columnes de la taula es pot afegir amb l'ajuda d'omplir propietats esquerra i dreta. Aquestes propietats afegeixen espai addicional des de les direccions dreta i esquerra a la cel·la. Les dues propietats es poden utilitzar al mateix temps o per separat. Aquest article ha demostrat amb èxit com afegir espais entre les columnes de la taula sense afectar les files.