Skip to main content

Używanie CSS do dodawania granic wewnętrznych w tabeli HTML

HTML na 2 ramki (Marzec 2024)

HTML na 2 ramki (Marzec 2024)
Anonim

Być może słyszałeś, że tabele CSS i HTML nie mieszają się. Nie o to chodzi. Tak, korzystanie z tabel HTML do układu nie jest już najlepszą praktyką projektowania stron internetowych, ponieważ zostały one zastąpione przez style układu CSS, ale tabele są nadal poprawnym znacznikiem używanym do dodawania danych tabelarycznych do strony internetowej.

Ponieważ tak wielu profesjonalistom zajmującym się internetem boi się stołów myśląc, że to tylko kłopoty, wielu z tych profesjonalistów ma niewielkie doświadczenie w pracy z tym wspólnym elementem HTML i zmagają się, gdy muszą dodać wewnętrzne linie do komórek tabeli na stronie internetowej.

Granice tabel CSS

Kiedy używasz CSS do dodawania obramowań do tabel, dodaje tylko obramowanie dookoła poza tabelą. Jeśli chcesz dodać wewnętrzne linie do poszczególnych komórek w tej tabeli, musisz dodać granice do wewnętrznych elementów CSS. Możesz użyć znacznika HR, aby dodać linie wewnątrz poszczególnych komórek.

Aby zastosować style omówione w tym samouczku, potrzebujesz tabeli na stronie. Następnie możesz utworzyć arkusz stylów jako wewnętrzny arkusz stylów w nagłówku dokumentu (jeśli masz do czynienia tylko z jedną stroną) lub dołączyć do dokumentu jako zewnętrzny arkusz stylów (jeśli witryna ma wiele stron). Umieszczasz style, aby dodać wewnętrzne linie do arkusza stylów.

Zanim zaczniesz

Zdecyduj, gdzie mają się pojawić linie w tabeli. Masz kilka opcji, w tym:

  • Otaczanie wszystkich komórek w celu utworzenia siatki
  • Pozycjonowanie linii między kolumnami
  • Tylko między rzędami
  • Między określonymi kolumnami lub wierszami.

Możesz również ustawić linie wokół pojedynczych komórek lub wewnątrz poszczególnych komórek.

Jak dodawać linie wokół wszystkich komórek w tabeli

Aby dodać linie wokół wszystkich komórek w tabeli, tworząc efekt siatki, dodaj następujące elementy do arkusza stylów:

td, th {obramowanie: solidne 1px czarne;}

Jak dodawać linie między kolumnami w tabeli

Aby dodać linie między kolumnami w celu utworzenia pionowych linii, które biegną od góry do dołu w kolumnach tabeli, dodaj następujące elementy do arkusza stylów:

td, th {border-left: solid 1px black;}

Jeśli nie chcesz, aby w pierwszej kolumnie pojawiały się pionowe linie, dodaj klasę do th i td komórki. W tym przykładzie przyjmij klasę bez granic na tych komórkach i usuń granicę za pomocą reguły CSS. Używana klasa HTML to:

class = "no-border">

Następnie dodaj następujący styl do arkusza stylów:

.bez granic {border-left: none;}

Jak dodawać linie między tylko rzędami w tabeli

Podobnie jak w przypadku dodawania linii między kolumnami, można dodać poziome linie między wierszami z jednym prostym stylem dodanym do arkusza stylów, jak następuje:

tr {border-bottom: solid 1px black;}

Aby usunąć ramkę z dolnej części tabeli, musisz jeszcze raz dodać do niej klasę

etykietka:

class = "no-border">

Dodaj następujący styl do swojego arkusza stylów:

.bez granic {border-bottom: none;}

Jak dodawać linie między określonymi kolumnami lub wierszami w tabeli

Jeśli chcesz tylko linie między określonymi wierszami lub kolumnami, musisz użyć klasy w tych komórkach lub wierszach. Dodawanie linii między kolumnami jest nieco trudniejsze niż między wierszami, ponieważ musisz dodać klasę do każdej komórki w tej kolumnie. Jeśli Twój stół jest automatycznie generowany z jakiegoś CMS, może nie być to możliwe, ale jeśli ręcznie kodujesz stronę, możesz dodać odpowiednie klasy, aby uzyskać ten efekt.

class = "side-border">

Dodawanie linii między wierszami jest łatwiejsze, ponieważ możesz dodać klasę do wiersza, w którym chcesz wstawić linię.

class = "border-bottom">

Następnie dodaj CSS do swojego arkusza stylów:

.border-side {border-left: solid 1px black;}.border-bottom {border-bottom: solid 1px black;}

Jak dodawać linie wokół pojedynczych komórek w tabeli

Aby dodać linie wokół pojedynczych komórek, dodajesz klasę do komórek, które chcesz obramować:

class = "border">

Następnie dodaj następujący styl CSS do arkusza stylów:

.granica {obramowanie: solidne 1px czarne;}

Jak dodawać linie wewnątrz pojedynczych komórek w tabeli

Jeśli chcesz dodać wiersze do zawartości komórki, najłatwiej to zrobić za pomocą znacznika reguły poziomej ().

Przydatne porady

Jeśli zauważysz przerwy w swoich granicach, upewnij się, że styl obramowania granicy jest ustawiony na stole. Dodaj do swojego arkusza stylów:

stół {border-collapse: collapse;}

Możesz ominąć wszystkie i użyć atrybutu border w tagu tabeli. Uświadom sobie jednak, że ten atrybut, mimo że nie jest przestarzały, jest znacznie mniej elastyczny niż CSS, ponieważ można zdefiniować tylko szerokość obramowania i może on mieć tylko wokół wszystkich komórek tabeli lub nie.