Bài viết này sẽ giải thích quy trình thêm hình ảnh bên trong ô của bảng trong HTML.
Làm cách nào để thêm hình ảnh bên trong ô bảng trong HTML?
HTML “ ” Thẻ được sử dụng để chèn một hình ảnh vào một ô của bảng.
cú pháp
Thực hiện theo cú pháp để nhúng một hình ảnh bên trong ô của bảng:
< td >< hình ảnh src = '' mọi điều = '' bề rộng = '' >< / td >
Nơi đây:
- “
” cho biết ô của bảng nơi hình ảnh cần được thêm vào. - “
” thẻ được sử dụng để chỉ định hình ảnh.
- “ src ” thuộc tính thiết lập đường dẫn của hình ảnh.
- “ mọi điều ” biểu thị văn bản sẽ được hiển thị trên màn hình trong trường hợp hình ảnh không tải được.
- “ bề rộng ” xác định chiều rộng của hình ảnh.
Thí dụ
Trong tệp HTML, hãy tạo một bảng bằng cách làm theo các hướng dẫn được cung cấp:
- “
” phần tử được sử dụng để tạo bảng. - “
” phần tử chỉ định một hàng. - “
” điều chỉnh tiêu đề trong đó “ colspan ” biểu thị số lượng cột mà một ô sẽ bao gồm. - “
” tạo các ô của bảng cho dữ liệu. Các ' ” các thẻ có thuộc tính bắt buộc được chèn vào trong thẻ này để nhúng hình ảnh vào một ô của bảng: < bàn >
< tr >
< thứ tự colspan = '3' Phong cách = 'cỡ chữ: 28px;' >Trái cây và rau quả< / thứ tự >
< / tr >
< tr >
< thứ tự >Tên< / thứ tự >
< thứ tự Phong cách = 'chiều rộng: 250px;' >Hình ảnh< / thứ tự >
< thứ tự >Trái cây / Rau < / thứ tự >
< / tr >
< tr >
< td >quả táo< / td >
< td >< hình ảnh src = '/images/apples.jpg' mọi điều = 'táo' bề rộng = '200' >< / td >
< td >Trái cây< / td >
< / tr >
< tr >
< td >Cà rốt< / thứ tự >
< td >< hình ảnh src = '/images/carrot.jpg' mọi điều = 'cà rốt' bề rộng = '200' >< / thứ tự >
< td >Rau< / thứ tự >
< / tr >
< tr >
< td >Cam< / thứ tự >
< td >< hình ảnh src = '/images/orang.jpg' mọi điều = 'trái cam' bề rộng = '200' >< / thứ tự >
< td >Trái cây< / thứ tự >
< / tr >
< / bàn >Có thể thấy rằng bảng HTML đã được tạo thành công cùng với các hình ảnh được nhúng:
CSS
Bây giờ, chúng ta sẽ thảo luận về các thuộc tính CSS được sử dụng để thiết lập bố cục của bảng.
Phần tử kiểu “bảng”
Đầu tiên, truy cập vào “
bàn {” theo tên thẻ và áp dụng các thuộc tính sau:
căn chỉnh văn bản : trung tâm ;
bề rộng : 800px ;
sụp đổ biên giới : sự sụp đổ ;
lề : Tự động ;
cỡ chữ : 20px ;
}Mô tả của mã trên được đưa ra dưới đây:
- “ căn chỉnh văn bản ” đặt căn chỉnh văn bản.
- “ bề rộng ” xác định chiều rộng của bảng.
- “ sụp đổ biên giới ” thuộc tính xác định xem đường viền có bị thu gọn hay không.
- “ lề ” thêm không gian xung quanh bàn.
- “ cỡ chữ ” xác định kích thước phông chữ văn bản của bảng.
Yếu tố kiểu “th” và “td”
thứ tự , td {
biên giới : 1px chất rắn hoa mỹ ;
}Ở đây, “ biên giới ” thuộc tính điều chỉnh đường viền xung quanh các phần tử bằng cách chỉ định các giá trị cho chiều rộng, kiểu và màu của đường viền.
đầu ra
Bài đăng này là tất cả về cách chèn hình ảnh vào ô của bảng trong HTML.
Phần kết luận
Để thêm một hình ảnh bên trong “
” tế bào, hãy sử dụng “ ” thẻ trong HTML “
' yếu tố. Phần tử “ ” chỉ định “ src ” để cung cấp URL hình ảnh. Cụ thể hơn, để điều chỉnh kích thước hình ảnh, hãy thêm “ chiều cao ' và ' bề rộng ” thuộc tính trong thẻ “
”. Blog này đã minh họa quy trình thêm hình ảnh vào ô của bảng HTML.
- “
- “