Hướng dẫn về Đường viền Bảng trong HTML. Ở đây chúng ta thảo luận về nhiều cách để xác định đường viền bảng với cú pháp tương ứng và các ví dụ về Đường viền bảng trong HTML

Bạn đang xem: màu đường viền bảng html

Đường viền Bảng trong HTML

Giới thiệu về Đường viền bảng trong HTML

Đường viền Bảng trong HTML được sử dụng để hiển thị đường viền xung quanh nội dung bảng. Điều này có thể được đặt xung quanh bảng bằng cách chỉ định các giá trị như 0 để không có đường viền nào hiển thị xung quanh các ô của bảng, trong khi giá trị 1 được đặt để hiển thị đường viền xung quanh các ô trong bảng. Chiều rộng bảng có thể được đặt trong các giá trị số để xác định mức độ dày của đường viền mà người dùng muốn cung cấp xung quanh bảng của họ. Người ta có thể đặt đường viền cho toàn bộ bảng hoặc cho một hàng hoặc cột cụ thể hoặc chỉ cho đầu bảng; mọi thứ đều có thể.

Cú pháp của Đường viền bảng trong HTML

Có nhiều cách để xác định đường viền bảng; chúng ta hãy xem cú pháp cho từng cái một:

Bắt đầu khóa học phát triển phần mềm miễn phí của bạn

Phát triển web, ngôn ngữ lập trình, Kiểm tra phần mềm & amp; những người khác

1. Đường viền chung của bảng: Đường viền này thường được sử dụng để xác định đường viền đơn giản xung quanh bảng như:

  & lt; table border = ”1 | 0 ”& gt;  

Ví dụ:

  bảng, th, td {
viền: 1px màu xanh lam đậm;
}  

2. Đường viền bảng có thể thu gọn: Thuộc tính này được sử dụng để đặt đường viền có thể thu gọn trong một dòng duy nhất xung quanh bảng của chúng tôi bằng cách sử dụng thuộc tính thu gọn đường viền.

  bảng {
biên giới-sụp đổ: sự sụp đổ;
}  

Ví dụ:

  bảng {
biên giới-sụp đổ: sự sụp đổ;
}
table, th, td {
đường viền: 0px;
}  

3. Đường viền xung quanh bảng: Thuộc tính này cho phép chúng tôi chỉ thêm đường viền bảng ở các cạnh bên ngoài chứ không phải vào từng ô bảng riêng lẻ, chỉ đơn giản là:

  bảng {
đường viền: 1px;
}  

4. Đường viền bảng có dấu chấm: người ta có thể chỉ cần thêm đường viền chấm làm đường viền vào bảng của mình bằng cách sử dụng cú pháp đơn giản như sau:

  bảng {
đường viền: 1px; tên-màu chấm;
}  

5. Đường viền bảng gạch ngang: Giống như dấu chấm, chúng tôi có thể đặt đường viền gạch ngang xung quanh bảng hoặc các ô trong bảng của mình. Điều này có thể mỏng hoặc dày tùy theo sự lựa chọn của người dùng bằng cách cài đặt giá trị.

  bảng {
đường viền: 3px; tên-màu gạch ngang;
}  

6. Đường viền bảng kép: Nếu chúng ta muốn thêm đường viền kép vào bảng của mình, thì cũng có thể bằng cách đặt thuộc tính trong mã CSS và tạo đường viền kép xung quanh bảng.

  bảng {
đường viền: 1px; tên-màu kép;
}  

7. Đường viền bảng xung quanh các ô trong bảng: Cú pháp này giúp chúng tôi cung cấp đường viền xung quanh các ô riêng lẻ hoặc bất kỳ ô cụ thể nào trong bảng với mã màu yêu thích của bạn. Trong cú pháp này, chúng tôi muốn thêm giá trị mã đường viền với từng ô riêng biệt.

  bảng {
đường viền: 1px; tên-màu chấm;
}
thứ tự{
đường viền: 1px; tên-màu;
}
td {
đường viền: 2px; tên-màu;
}  

8. Đường viền bảng với các lớp CSS: thay vì đặt đường viền cho từng ô bảng riêng lẻ, các lớp CSS giúp chúng tôi cung cấp mã đường viền chung cho bảng của mình. Điều này có thể được thực hiện bằng cách sử dụng cú pháp sau:

  & lt; style & gt;
bàn{
background-color: tên-màu;
}
bảng thứ {
Mã CSS
}
bảng td {
Mã CSS
}
& lt; / style & gt;  

9. Đường viền dưới cùng của bảng: Thuộc tính này của đường viền bảng được sử dụng để cung cấp các đường phân chia theo chiều ngang giữa thẻ th và td của bảng như sau:

  th, td {
border-bottom: giá trị color-name;
}  

10. Đường viền bảng tròn : Nó sẽ hiển thị các góc được làm tròn đối với đường viền bảng.

  bảng {
border-radius: giá trị;
border: giá trị color-name;
}  

Ví dụ về Đường viền bảng trong HTML

Sau đây là các ví dụ về Đường viền bảng

Xem Thêm  Phương pháp Java String Replace (): Hướng dẫn Từng bước - làm thế nào để thay thế trong chuỗi trong java

Ví dụ # 1

Ví dụ sau đây hiển thị hai bảng khác nhau với các đường viền khác nhau. Bảng đầu tiên hiển thị đường viền bình thường xung quanh bảng, trong khi bảng thứ hai là ví dụ về định dạng đường viền bảng có thể thu gọn.

Mã HTML:

 & lt; html & gt;
& lt; đầu & gt;
& lt; phong cách & gt;
.collapsetable {
biên giới-sụp đổ: sự sụp đổ;
viền: 3px màu xanh lam đậm;
}
& lt; / style & gt;
& lt; / head & gt;
& lt; body & gt;
& lt; table border = "1" & gt;
& lt; caption & gt; & lt; b & gt; Genral Table Border & lt; / b & gt; & lt; / caption & gt;
& lt; tr & gt;
& lt; th & gt; SR.NO & lt; / th & gt;
& lt; th & gt; TÊN & lt; / th & gt;
& lt; th & gt; Giáo dục & lt; / th & gt;
& lt; th & gt; TUỔI & lt; / th & gt;
& lt; / tr & gt;
& lt; tr & gt;
& lt; td & gt; 1 & lt; / td & gt;
& lt; td & gt; Dinesh & lt; / td & gt;
& lt; td & gt; BCA & lt; / td & gt;
& lt; td & gt; 26 & lt; / td & gt;
& lt; / tr & gt;
& lt; tr & gt;
& lt; td & gt; 2 & lt; / td & gt;
& lt; td & gt; Raj & lt; / td & gt;
& lt; td & gt; CA & lt; / td & gt;
& lt; td & gt; 30 & lt; / td & gt;
& lt; / tr & gt;
& lt; tr & gt;
& lt; td & gt; 3 & lt; / td & gt;
& lt; td & gt; Deepti & lt; / td & gt;
& lt; td & gt; TÔI & lt; / td & gt;
& lt; td & gt; 28 & lt; / td & gt;
& lt; / tr & gt;
& lt; tr & gt;
& lt; td & gt; 4 & lt; / td & gt;
& lt; td & gt; Akhilesh & lt; / td & gt;
& lt; td & gt; B.com & lt; / td & gt;
& lt; td & gt; 21 & lt; / td & gt;
& lt; / tr & gt;
& lt; tr & gt;
& lt; td & gt; 5 & lt; / td & gt;
& lt; td & gt; Sara & lt; / td & gt;
& lt; td & gt; MBA & lt; / td & gt;
& lt; td & gt; 26 & lt; / td & gt;
& lt; / tr & gt;
& lt; / table & gt;
& lt; br & gt;
& lt; table class = "openssetable" border = "1" & gt;
& lt; caption & gt; & lt; b & gt; Collapsable Table Border & lt; / b & gt; & lt; / caption & gt;
& lt; tr & gt;
& lt; th & gt; Mã trống & lt; / th & gt;
& lt; th & gt; Tên tôi & lt; / th & gt;
& lt; th & gt; Chức danh & lt; / th & gt;
& lt; th & gt; Lương (LPA) & lt; / th & gt;
& lt; / tr & gt;
& lt; tr & gt;
& lt; td & gt; 911 & lt; / td & gt;
& lt; td & gt; Zoya Shaikh & lt; / td & gt;
& lt; td & gt; Nhà phát triển & lt; / td & gt;
& lt; td & gt; 3,6 & lt; / td & gt;
& lt; / tr & gt;
& lt; tr & gt;
& lt; td & gt; 912 & lt; / td & gt;
& lt; td & gt; Lisa Dev & lt; / td & gt;
& lt; td & gt; Người kiểm tra & lt; / td & gt;
& lt; td & gt; 2,8 & lt; / td & gt;
& lt; / tr & gt;
& lt; tr & gt;
& lt; td & gt; 913 & lt; / td & gt;
& lt; td & gt; Deepak Jadeja & lt; / td & gt;
& lt; td & gt; Tiếp thị Kỹ thuật số & lt; / td & gt;
& lt; td & gt; 5.2 & lt; / td & gt;
& lt; / tr & gt;
& lt; tr & gt;
& lt; td & gt; 914 & lt; / td & gt;
& lt; td & gt; Aditi Yewale & lt; / td & gt;
& lt; td & gt; Nhà phát triển & lt; / td & gt;
& lt; td & gt; 4 & lt; / td & gt;
& lt; / tr & gt;
& lt; tr & gt;
& lt; td & gt; 915 & lt; / td & gt;
& lt; td & gt; Simren Rao & lt; / td & gt;
& lt; td & gt; HR & lt; / td & gt;
& lt; td & gt; 5,6 & lt; / td & gt;
& lt; / tr & gt;
& lt; / table & gt;
& lt; / body & gt;
& lt; / html & gt;  

Đầu ra:

table-border-in-html

Ví dụ # 2

Ví dụ này chỉ ra cách đặt đường viền cho bảng chỉ cho phần bên ngoài với các loại đường viền bảng khác nhau:

Mã HTML:

  & lt; head & gt;
& lt; phong cách & gt;
bàn{
border: 1px màu đỏ đặc;
biên giới-sụp đổ: sự sụp đổ;
}
& lt; / style & gt;
& lt; / head & gt;
& lt; body & gt;
& lt; h4 & gt; Bảng có đường viền bên ngoài & lt; / h4 & gt;
& lt; bảng & gt;
& lt; tr & gt;
& lt; th & gt; Chỉ mục & lt; / th & gt;
& lt; th & gt; Phần & lt; / th & gt;
& lt; th & gt; Thời lượng & lt; / th & gt;
& lt; / tr & gt;
& lt; tr & gt;
& lt; td & gt; 1 & lt; / td & gt;
& lt; td & gt; Mùa hè & lt; / td & gt;
& lt; td & gt; 4 tháng & lt; / td & gt;
& lt; / tr & gt;
& lt; tr & gt;
& lt; td & gt; 2 & lt; / td & gt;
& lt; td & gt; Những mùa mưa & lt; / td & gt;
& lt; td & gt; 4 tháng & lt; / td & gt;
& lt; / tr & gt;
& lt; tr & gt;
& lt; td & gt; 3 & lt; / td & gt;
& lt; td & gt; Mùa đông & lt; / td & gt;
& lt; td & gt; 4 tháng & lt; / td & gt;
& lt; / tr & gt;
& lt; / table & gt;
& lt; h4 & gt; Bảng có đường viền chấm & lt; / h4 & gt;
& lt; table style = "border: 2px dotted blue;" & gt;
& lt; tr & gt;
& lt; th & gt; Chỉ mục & lt; / th & gt;
& lt; th & gt; Phần & lt; / th & gt;
& lt; th & gt; Thời lượng & lt; / th & gt;
& lt; / tr & gt;
& lt; tr & gt;
& lt; td & gt; 1 & lt; / td & gt;
& lt; td & gt; Mùa hè & lt; / td & gt;
& lt; td & gt; 4 tháng & lt; / td & gt;
& lt; / tr & gt;
& lt; tr & gt;
& lt; td & gt; 2 & lt; / td & gt;
& lt; td & gt; Những mùa mưa & lt; / td & gt;
& lt; td & gt; 4 tháng & lt; / td & gt;
& lt; / tr & gt;
& lt; tr & gt;
& lt; td & gt; 3 & lt; / td & gt;
& lt; td & gt; Mùa đông & lt; / td & gt;
& lt; td & gt; 4 tháng & lt; / td & gt;
& lt; / tr & gt;
& lt; / table & gt;
& lt; h4 & gt; Bảng có đường viền đứt nét & lt; / h4 & gt;
& lt; table style = "border: 3px gạch ngang màu xanh lá cây;" & gt;
& lt; tr & gt;
& lt; th & gt; Chỉ mục & lt; / th & gt;
& lt; th & gt; Phần & lt; / th & gt;
& lt; th & gt; Thời lượng & lt; / th & gt;
& lt; / tr & gt;
& lt; tr & gt;
& lt; td & gt; 1 & lt; / td & gt;
& lt; td & gt; Mùa hè & lt; / td & gt;
& lt; td & gt; 4 tháng & lt; / td & gt;
& lt; / tr & gt;
& lt; tr & gt;
& lt; td & gt; 2 & lt; / td & gt;
& lt; td & gt; Những mùa mưa & lt; / td & gt;
& lt; td & gt; 4 tháng & lt; / td & gt;
& lt; / tr & gt;
& lt; tr & gt;
& lt; td & gt; 3 & lt; / td & gt;
& lt; td & gt; Mùa đông & lt; / td & gt;
& lt; td & gt; 4 tháng & lt; / td & gt;
& lt; / tr & gt;
& lt; / table & gt;
& lt; h4 & gt; Bảng có đường viền đôi & lt; / h4 & gt;
& lt; table style = "border: 4px double yellow;" & gt;
& lt; tr & gt;
& lt; th & gt; Chỉ mục & lt; / th & gt;
& lt; th & gt; Phần & lt; / th & gt;
& lt; th & gt; Thời lượng & lt; / th & gt;
& lt; / tr & gt;
& lt; tr & gt;
& lt; td & gt; 1 & lt; / td & gt;
& lt; td & gt; Mùa hè & lt; / td & gt;
& lt; td & gt; 4 tháng & lt; / td & gt;
& lt; / tr & gt;
& lt; tr & gt;
& lt; td & gt; 2 & lt; / td & gt;
& lt; td & gt; Những mùa mưa & lt; / td & gt;
& lt; td & gt; 4 tháng & lt; / td & gt;
& lt; / tr & gt;
& lt; tr & gt;
& lt; td & gt; 3 & lt; / td & gt;
& lt; td & gt; Mùa đông & lt; / td & gt;
& lt; td & gt; 4 tháng & lt; / td & gt;
& lt; / tr & gt;
& lt; / table & gt;
& lt; / body & gt;  

Đầu ra: Kết quả này hiển thị một bảng có đường viền chấm, đứt nét và đường viền kép ở bên ngoài bảng.

Xem Thêm  Các phần tử ngữ nghĩa trong HTML5 - phần tử ngữ nghĩa html5 mới

dấu chấm, nét đứt và đường viền kép

Ví dụ # 3

Ví dụ hiển thị các ô trong bảng được bao quanh bằng từng màu khác nhau như:

Mã HTML:

  & lt; html & gt;
& lt; đầu & gt;
& lt; phong cách & gt;
bàn{
viền: màu đỏ đặc 3px;
}
thứ tự{
viền: màu xanh lam đặc 2px;
}
td {
viền: 2px đen đặc;
}
& lt; / style & gt;
& lt; / head & gt;
& lt; body & gt;
& lt; h4 & gt; Đường viền bảng xung quanh Ô & lt; / h4 & gt;
& lt; bảng & gt;
& lt; tr & gt;
& lt; th & gt; Tên & lt; / th & gt;
& lt; th & gt; Họ & lt; / th & gt;
& lt; th & gt; Thành phố & lt; / th & gt;
& lt; / tr & gt;
& lt; tr & gt;
& lt; td & gt; Rita & lt; / td & gt;
& lt; td & gt; Mishra & lt; / td & gt;
& lt; td & gt; Mumbai & lt; / td & gt;
& lt; / tr & gt;
& lt; tr & gt;
& lt; td & gt; Rashmi & lt; / td & gt;
& lt; td & gt; Patil & lt; / td & gt;
& lt; td & gt; Nagpur & lt; / td & gt;
& lt; / tr & gt;
& lt; tr & gt;
& lt; td & gt; Kartik & lt; / td & gt;
& lt; td & gt; Dev & lt; / td & gt;
& lt; td & gt; Pune & lt; / td & gt;
& lt; / tr & gt;
& lt; / table & gt;
& lt; / body & gt;
& lt; html & gt;  

Đầu ra:

other color Individual

Ví dụ # 4

Một bảng khác có đường viền được làm tròn với đường viền làm dải phân cách ngang

Mã HTML:

  & lt; html & gt;
& lt; đầu & gt;
& lt; phong cách & gt;
.vòng{
bán kính đường viền: 15px;
viền: 2px màu tím đặc;
đệm: 5px;
}
th, td {
border-bottom: 1px đen đặc;
}
& lt; / style & gt;
& lt; / head & gt;
& lt; body & gt;
& lt; h4 & gt; Đường viền bảng xung quanh Ô & lt; / h4 & gt;
& lt; table class = "round" & gt;
& lt; tr & gt;
& lt; th & gt; Bánh & lt; / th & gt;
& lt; th & gt; Cân nặng & lt; / th & gt;
& lt; th & gt; Giá & lt; / th & gt;
& lt; / tr & gt;
& lt; tr & gt;
& lt; td & gt; Chocalate & lt; / td & gt;
& lt; td & gt; 1/2 kg & lt; / td & gt;
& lt; td & gt; 400 / - & lt; / td & gt;
& lt; / tr & gt;
& lt; tr & gt;
& lt; td & gt; Rasmalai & lt; / td & gt;
& lt; td & gt; 1 kg & lt; / td & gt;
& lt; td & gt; 850 / - & lt; / td & gt;
& lt; / tr & gt;
& lt; / table & gt;
& lt; / body & gt;
& lt; / html & gt;  

Đầu ra:

Xem Thêm  Loại cột thay đổi MySQL - mysql thay đổi loại cột thay đổi bảng

dải phân cách ngang

Kết luận

  • Đường viền bảng trong HTML được đặt bằng cách gán giá trị 1 để hiển thị đường viền xung quanh bảng, trong khi giá trị 0 để ẩn đường viền xung quanh bảng.
  • Người ta có thể đặt đường viền xung quanh bảng theo nhiều kiểu khác nhau như đường viền dày hoặc mỏng đơn giản, đường viền có thể thu gọn, đường chấm, đường kép, đường nét đứt.

Các bài báo được đề xuất

Đây là hướng dẫn về Đường viền Bảng trong HTML. Ở đây chúng tôi thảo luận về nhiều cách để xác định đường viền bảng với cú pháp tương ứng và các ví dụ về Đường viền bảng trong HTML. Bạn cũng có thể xem qua các bài viết liên quan khác của chúng tôi để tìm hiểu thêm–

2

Chia sẻ

Chia sẻ


Xem thêm những thông tin liên quan đến chủ đề màu đường viền bảng html

How to color your table in HTML | Table Background Color,Font Color

alt

  • Tác giả: Bazinga
  • Ngày đăng: 2020-08-14
  • Đánh giá: 4 ⭐ ( 8507 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Formatting table in HTML | TableBackground Color,Font Color

    table_formatting
    Follow me on Instagram :
    https://instagram.com/sentiren_longkumer

Bảng (table) trong HTML, cú pháp và ví dụ minh họa

  • Tác giả: thuthuat.taimienphi.vn
  • Đánh giá: 5 ⭐ ( 3901 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: bang table trong html, Bảng (table) trong HTML, cú pháp và ví dụ minh họa

Cách sử dụng đường viền (border) trong CSS

  • Tác giả: freehost.page
  • Đánh giá: 5 ⭐ ( 7270 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Thay đổi màu tô, đường kẻ và viền

  • Tác giả: support.microsoft.com
  • Đánh giá: 4 ⭐ ( 1885 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Thay đổi màu tô, đường kẻ và viền bằng màu sắc phối màu hoặc màu tùy chỉnh.

Bảng trong HTML(HTML tables)

  • Tác giả: laptrinhtudau.com
  • Đánh giá: 3 ⭐ ( 2269 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Cách tạo bảng trong HTML, Cách chỉnh sửa một bảng trong HTML

Share and store technology knowledge

  • Tác giả: dnmtechs.com
  • Đánh giá: 3 ⭐ ( 8597 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Cách CSS Bảng (Table)

  • Tác giả: laptrinhvienphp.com
  • Đánh giá: 3 ⭐ ( 9350 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Trong bài hướng dẫn tự học CSS này, bạn sẽ tìm hiểu toàn tập cách CSS bảng đẹp, CSS table một cách dễ hiểu nhất.

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình

By ads_php