Co to jest wyściółka komórek stołowych w CSS

Domyślnie tabela ma bardzo wąskie komórki, co może prowadzić do problemów z widocznością. Aby tego uniknąć, wolimy używać właściwości wyściółki CSS do podsumowania komórek tabeli. Wyściółka sprawia, że ​​komórki jest szersze i większe niż ich domyślne rozmiar. W rezultacie tabela będzie dobrze wyglądać z wyraźną prezentacją danych.

W tym artykule opiszemy, jak używać wyściółki komórkowej w tabeli w CSS.

Jak używać wyściółki z komórek tabeli w CSS?

W CSS „wyściółka”Właściwość dodaje przestrzeń pustki wokół zawartości elementu. Jest również wykorzystywany do kontrolowania przestrzeni z każdej strony. Na przykład wyściółka tylko z lewej strony można dodać za pomocą właściwości lewej wyściółki. Podobnie właściwości prawicowe, wyściółki i wyściółki mogą być używane do tworzenia przestrzeni wokół zawartości elementu odpowiednio od prawej, górnej i dolnej.

Aby dodać wyściółkę w komórce tabeli, postępuj zgodnie z podanym przykładem.

Przykład 1: Dodaj wyściółkę w komórkach tabeli za pomocą właściwości wyściółki

Na naszej stronie HTML mamy stół z bardzo wąskimi blokami. Dodajmy trochę miejsca w blokach tabeli:

Oto bieżący kod HTML dla naszej strony internetowej:

Linux	Wskazówka
LLC	USA

Teraz weźmy „TD”Lub komórka danych tabeli wraz z tabelą i zastosuj„styl graniczny„Nieruchomość jako„solidny". W ten sposób możesz dostać granicę wokół stołu i jej treści. W następnym kroku użyj „wyściółka„Własność o wartości”1rem". W rezultacie komórka stołowa stanie się dłuższa i szersza:

Zapisz swój plik HTML i uruchom go w przeglądarce internetowej, aby wyświetlić wynik:

Jak widać, wyściółka została pomyślnie dodana do komórki stołowej:

Przykład 2: Dostosuj wyściółki w komórkach tabeli z każdej strony

W tym przykładzie umieścimy nasz tekst w lewym górnym rogu komórki. W tym celu przypisamy „wyściółka„Wartość nieruchomości jako„0px 35px 30px 0px”, Gdzie pierwszy 0px jest dla góry, druga wartość 35px jest dla prawej, 30px dla dolnej i czwartej wartości 0px jest dla lewego wyściółka:

Wyjście

Wyjaśniliśmy ci, czym jest wyściółka komórek stołowych i jak z niej korzystać.

Wniosek

Komórki tabeli mają domyślnie ograniczoną przestrzeń, co może powodować problemy z czytelnością dla widza. W tym celu CSS ”wyściółka„Własność jest wykorzystywana do dodania przestrzeni do komórki stołowej. W tym przewodniku pomogliśmy ci zrozumieć, czym jest wyściółka komórek stołowych. Ponadto pokazaliśmy również różne przykłady związane z dodaniem wyściółki komórkowej za pomocą CSS.