Cách tạo bảng chỉ bằng thẻ và CSS

” thẻ bên trong nó.

---

---

Ví dụ
Xem xét ví dụ mã HTML sau để tạo bảng:

< div lớp học = 'divTable' >
< div lớp học = 'dòng tiêu đề' >
< div lớp học = 'divcell' >< b > NHẬN DẠNG < / b >< / div >
< div lớp học = 'divcell' >< b > Tên < / b >< / div >
< div lớp học = 'divcell' >< b > Tuổi < / b >< / div >
< / div >
< div lớp học = 'divRow' >
< div lớp học = 'divcell' > 001 < / div >
< div lớp học = 'divcell' > thợ rèn < / div >
< div lớp học = 'divcell' > 25 < / div >
< / div >
< div lớp học = 'divRow' >
< div lớp học = 'divcell' > 002 < / div >
< div lớp học = 'divcell' > John < / div >
< div lớp học = 'divcell' > 31 < / div >
< / div >
< div lớp học = 'divRow' >
< div lớp học = 'divcell' > 003 < / div >
< div lớp học = 'divcell' > Charles < / div >
< div lớp học = 'divcell' > 28 < / div >
< / div >
< / div >

Trong đoạn mã trên:

• MỘT '
  ” thẻ được thêm vào với lớp có tên “ divTable ”.
• Bên trong “ div ” phần tử vùng chứa, hãy thêm phần tử khác “ div ” phần tử vùng chứa với lớp được khai báo là “ dòng tiêu đề ”.
• Một lần nữa, thêm ba “ div ” các phần tử có các lớp được đặt tên là “ divRow ” với ba thùng chứa phụ có “ divCell ' lớp học.
• Sau đó, thêm ba phần tử div thêm “ NHẬN DẠNG ”, “ Tên ' Và ' Tuổi ” ở hàng tiêu đề của bảng.
• Sau đó, chỉ định các giá trị cho “ID”, “Name” và “Age” cho từng phần tử div.

Đây là tất cả về cách sử dụng “ div ” phần tử để tạo bảng. Bây giờ, hãy áp dụng các thuộc tính CSS cho nó:

---

---

.divTable
{
bày: bàn;
chiều rộng :tự động;
lý lịch- màu sắc :#eee;
ranh giới :1px rắn # 666666 ;
khoảng cách đường viền: 5px;
}
.divRow
{
chiều rộng :tự động;
hiển thị: bảng-hàng;
}
.divCell
{
chiều rộng :150px;
nổi: trái;
hiển thị: bảng-cột;
lý lịch- màu sắc : rgb ( 212 , 209 , 209 ) ;
}

Trong phần tử kiểu CSS ở trên:

• Thêm một bộ chọn đề cập đến “ divTable ” (có chứa tất cả các giá trị của bảng) và xác định các thuộc tính CSS mong muốn (ví dụ: “ trưng bày ”, “ chiều rộng ”, “ màu nền ”, “ ranh giới ' Và ' khoảng cách biên giới ”) cho nội dung bảng.
• Sau đó, thêm bộ chọn lớp để chọn các thành phần của “ divRow ” lớp để thêm CSS “ chiều rộng ' Và ' trưng bày ” thuộc tính cho các phần tử.
• Cuối cùng, thêm các thuộc tính kiểu CSS vào các thành phần trong “ .divCell ” bộ chọn lớp.

Điều này sẽ tạo một bảng trong đầu ra và sẽ hiển thị các kết quả sau:

Đó là tất cả về cách tạo bảng trong HTML chỉ sử dụng thẻ