Ten artykuł wyjaśni procedurę dodawania obrazu w komórce tabeli w HTML.
Jak dodać obraz wewnątrz komórki tabeli w HTML?
Kod HTML „
Składnia
Postępuj zgodnie ze składnią, aby osadzić obraz w komórce tabeli:
< td >< img źródło = '' wszystko = '' szerokość = '' >< / td >
Tutaj:
- “
Element ” wskazuje komórkę tabeli, do której należy dodać obraz. - “
Znacznik ” służy do określenia obrazu. - “ źródło ” ustawia ścieżkę obrazu.
- “ wszystko ” oznacza tekst, który zostanie wyświetlony na ekranie w przypadku niepowodzenia ładowania obrazu.
- “ szerokość ” określa szerokość obrazu.
Przykład
W pliku HTML utwórz tabelę, postępując zgodnie z podanymi instrukcjami:
- “
Element ” służy do tworzenia tabeli. - “
Element ” określa wiersz. - “
” dostosowuje nagłówek, w którym „ kolspan ” określa, ile kolumn ma zajmować komórka. - “
” tworzy komórki tabeli dla danych. „ ” znaczniki z wymaganymi atrybutami są wstawiane do tego znacznika w celu osadzenia obrazów w komórce tabeli: < stół >
< tr >
< cz kolspan = „3” styl = 'rozmiar czcionki: 28px;' >Owoce i Warzywa< / cz >
< / tr >
< tr >
< cz >Imię< / cz >
< cz styl = 'szerokość: 250 pikseli;' >Obraz< / cz >
< cz >Owoce / Warzywa< / cz >
< / tr >
< tr >
< td >Jabłko< / td >
< td >< img źródło = '/images/jabłka.jpg' wszystko = 'jabłko' szerokość = „200” >< / td >
< td >Owoce< / td >
< / tr >
< tr >
< td >Marchewka< / cz >
< td >< img źródło = '/images/marchewka.jpg' wszystko = 'marchewka' szerokość = „200” >< / cz >
< td >Warzywa< / cz >
< / tr >
< tr >
< td >Pomarańczowy< / cz >
< td >< img źródło = '/images/pomarańczowy.jpg' wszystko = 'Pomarańczowy' szerokość = „200” >< / cz >
< td >Owoce< / cz >
< / tr >
< / stół >Można zauważyć, że tabela HTML została pomyślnie utworzona wraz z osadzonymi obrazami:
CSS
Teraz omówimy właściwości CSS wykorzystywane do ustawienia układu tabeli.
Element stylu „stół”.
Najpierw uzyskaj dostęp do „
stół {” po nazwie znacznika i zastosuj następujące właściwości:
wyrównanie tekstu : Centrum ;
szerokość : 800 pikseli ;
upadek granicy : upadek ;
margines : automatyczny ;
rozmiar czcionki : 20px ;
}Opis powyższego kodu znajduje się poniżej:
- “ wyrównanie tekstu ” ustawia wyrównanie tekstu.
- “ szerokość ” określa szerokość tabeli.
- “ upadek granicy ” określa, czy obramowanie jest zwinięte, czy nie.
- “ margines ” zwiększa przestrzeń wokół stołu.
- “ rozmiar czcionki ” określa rozmiar czcionki tekstu tabeli.
Styl „th” i element „td”.
cz , td {
granica : 1 piks solidny fioletowy ;
}Tutaj ' granica ” dostosowuje obramowanie wokół elementów, określając wartości szerokości, stylu i koloru obramowania.
Wyjście
Ten post dotyczy wstawiania obrazów do komórki tabeli w HTML.
Wniosek
Aby dodać obraz wewnątrz „
”, użyj „ ” tag w kodzie HTML “ ' element. Element „ ” określa „ źródło ”, aby podać adres URL obrazu. Mówiąc dokładniej, aby dostosować rozmiar obrazu, dodaj „ Wysokość ' oraz ' szerokość ” w tagu „
”. Ten blog ilustruje procedurę dodawania obrazu w komórce tabeli HTML.
- “
- “