Cách thêm đường viền vào bảng HTML – kiểu viền bảng html mỏng

&

. Thực hành với các ví dụ

Bạn đang xem: kiểu đường viền bảng html thin

Để thêm đường viền vào HTML & lt; table & gt; , bạn trước tiên cần biết cách tạo một bảng HTML. Trong HTML , bạn có thể tạo bảng bằng cách sử dụng & lt; table & gt; kết hợp với các thẻ & lt; tr & gt; , & lt; td & gt; và & lt; th & gt; .

Tìm hiểu về cách tạo bảng HTML tại đây

Tạo đường viền cho bảng HTML

Sau khi tạo bảng HTML, bạn nên thêm đường viền vào bảng đó, vì đường viền không được thêm theo mặc định. Đầu tiên, hãy xem một ví dụ, nơi chúng tôi sử dụng HTML
thuộc tính đường viền.

Ví dụ về cách tạo HTML bảng có

thuộc tính border

:

 
 & lt; 
 html 
 & gt; 

  
 & lt; 
 head 
 & gt; 

    
 & lt; 
 title 
 & gt; 
 Tiêu đề của tài liệu 
 & lt; / 
 title 
 & gt; 

  
 & lt; / 
 head 
 & gt; 

  
 & lt; 
 body 
 & gt; 

    
 & lt; 
 bảng 
 
 border 
 = 
" 1 "
 & gt; 

      
 & lt; 
 tr 
 & gt; 

        
 & lt; 
 th 
 & gt; 
 Người 
 & lt; / 
 th 
 & gt; 

        
 & lt; 
 th 
 & gt; 
 Tuổi 
 & lt; / 
 th 
 & gt; 

      
 & lt; / 
 tr 
 & gt; 

      
 & lt; 
 tr 
 & gt; 

        
 & lt; 
 td 
 & gt; 
 Ann 
 & lt; / 
 td 
 & gt; 

        
 & lt; 
 td 
 & gt; 
 19 
 & lt; / 
 td 
 & gt; 

      
 & lt; / 
 tr 
 & gt; 

      
 & lt; 
 tr 
 & gt; 

        
 & lt; 
 td 
 & gt; 
 Susie 
 & lt; / 
 td 
 & gt; 

        
 & lt; 
 td 
 & gt; 
 22 
 & lt; / 
 td 
 & gt; 

      
 & lt; / 
 tr 
 & gt; 

    
 & lt; / 
 bảng 
 & gt; 

  
 & lt; / 
 body 
 & gt; 

 & lt; / 
 html 
 & gt; 
  

Hãy tự mình thử »

Kết quả

Người
Tuổi tác

Ann
19

Susie
22

Dù sao, chúng tôi khuyên bạn nên sử dụng thuộc tính CSS border để thêm đường viền vào bảng của mình.
Để thêm đường viền vào bảng, bạn cần xác định & lt; style & gt; cho bảng của mình.

Hãy nhớ thêm đường viền cho các thẻ & lt; th & gt; và & lt; td & gt; để có một bảng hoàn chỉnh. Đặt thuộc tính border-sập cũng như (nếu bạn không xác định viền-thu gọn, thì nó sẽ sử dụng viền-thu gọn: tách biệt theo mặc định).

Ví dụ về cách tạo đường viền cho bảng HTML:

 
 & lt; 
 html 
 & gt; 

  
 & lt; 
 head 
 & gt; 

    
 & lt; 
 title 
 & gt; 
 Tiêu đề của tài liệu 
 & lt; / 
 title 
 & gt; 

    
 & lt; 
 style 
 & gt; 
 

      
 bảng 
,
      
 th 
,
      
 td 
 {
        
 padding 
: 
 10px 
;
        
 border 
:
 1px 
 màu đen đặc;
        
 border-sập 
: sập;
      }
    
 
 & lt; / 
 style 
 & gt; 

  
 & lt; / 
 head 
 & gt; 

  
 & lt; 
 body 
 & gt; 

    
 & lt; 
 bảng 
 & gt; 

      
 & lt; 
 tr 
 & gt; 

        
 & lt; 
 th 
 & gt; 
 Người 
 & lt; / 
 th 
 & gt; 

        
 & lt; 
 th 
 & gt; 
 Tuổi 
 & lt; / 
 th 
 & gt; 

      
 & lt; / 
 tr 
 & gt; 

      
 & lt; 
 tr 
 & gt; 

        
 & lt; 
 td 
 & gt; 
 Ann 
 & lt; / 
 td 
 & gt; 

        
 & lt; 
 td 
 & gt; 
 19 
 & lt; / 
 td 
 & gt; 

      
 & lt; / 
 tr 
 & gt; 

      
 & lt; 
 tr 
 & gt; 

        
 & lt; 
 td 
 & gt; 
 Susie 
 & lt; / 
 td 
 & gt; 

        
 & lt; 
 td 
 & gt; 
 22 
 & lt; / 
 td 
 & gt; 

      
 & lt; / 
 tr 
 & gt; 

    
 & lt; / 
 bảng 
 & gt; 

  
 & lt; / 
 body 
 & gt; 

 & lt; / 
 html 
 & gt; 
  

Hãy tự mình thử »

Cách thay đổi kiểu viền bảng HTML bằng CSS

Bạn có thể tạo kiểu cho bảng của mình bằng cách sử dụng thuộc tính viết tắt CSS border hoặc border-width , border-style , thuộc tính màu viền , riêng biệt. Xem ví dụ dưới đây để có kết quả hiển thị của các thuộc tính này.

Ví dụ về cách thay đổi kiểu đường viền bảng HTML bằng CSS:

 
 & lt; 
 html 
 & gt; 

  
 & lt; 
 head 
 & gt; 

    
 & lt; 
 title 
 & gt; 
 Tiêu đề của tài liệu 
 & lt; / 
 title 
 & gt; 

    
 & lt; 
 style 
 & gt; 
 

      
 bảng 
 {
        
 border-style 
: ridge;
        
 border-width 
: 
 150px 
;
        
 border-color 
: 
 # 8ebf42 
;
        
 background-color 
: 
 # d9d9d9 
;
      }
      
 th 
 {
        
 border 
: 
 5px 
 solid 
 # 095484 
;
      }
      
 td 
 {
        
 border 
: 
 20px 
 rãnh 
 # 1c87c9 
;
      }
    
 
 & lt; / 
 style 
 & gt; 

  
 & lt; / 
 head 
 & gt; 

  
 & lt; 
 body 
 & gt; 

    
 & lt; 
 bảng 
 & gt; 

      
 & lt; 
 tr 
 & gt; 

        
 & lt; 
 th 
 & gt; 
 Người 
 & lt; / 
 th 
 & gt; 

        
 & lt; 
 th 
 & gt; 
 Tuổi 
 & lt; / 
 th 
 & gt; 

      
 & lt; / 
 tr 
 & gt; 

      
 & lt; 
 tr 
 & gt; 

        
 & lt; 
 td 
 & gt; 
 Ann 
 & lt; / 
 td 
 & gt; 

        
 & lt; 
 td 
 & gt; 
 19 
 & lt; / 
 td 
 & gt; 

      
 & lt; / 
 tr 
 & gt; 

      
 & lt; 
 tr 
 & gt; 

        
 & lt; 
 td 
 & gt; 
 Susie 
 & lt; / 
 td 
 & gt; 

        
 & lt; 
 td 
 & gt; 
 22 
 & lt; /
 td 
 & gt; 

      
 & lt; / 
 tr 
 & gt; 

    
 & lt; / 
 bảng 
 & gt; 

  
 & lt; / 
 body 
 & gt; 

 & lt; / 
 html 
 & gt; 
  

Hãy tự mình thử »

Nếu bạn không muốn đường viền bao quanh bảng (hoặc nếu bạn cần các đường viền khác nhau trên mỗi cạnh của bảng), bạn có thể sử dụng bất kỳ thuộc tính nào sau đây: border-top , biên giới bên phải , biên giới dưới cùng và biên giới bên trái .

Ví dụ về cách thêm đường viền dưới cùng vào bảng HTML:

 
 & lt; 
 html 
 & gt; 

  
 & lt; 
 head 
 & gt; 

    
 & lt; 
 title 
 & gt; 
 Tiêu đề của tài liệu 
 & lt; / 
 title 
 & gt; 

    
 & lt; 
 style 
 & gt; 
 

      
 bảng 
 {
        
 border-sập 
: sập;
      }
      
 td 
,
      
 th 
 {
        
 padding 
: 
 10px 
;
        
 border-bottom 
: 
 2px 
 solid 
 # 8ebf42 
 ;
        
 text-align 
: center;
      }
    
 
 & lt; / 
 style 
 & gt; 

  
 & lt; / 
 head 
 & gt; 

  
 & lt; 
 body 
 & gt; 

    
 & lt; 
 bảng 
 & gt; 

      
 & lt; 
 tr 
 & gt; 

        
 & lt; 
 th 
 & gt; 
 Người 
 & lt; / 
 th 
 & gt; 

        
 & lt; 
 th 
 & gt; 
 Tuổi 
 & lt; / 
 th 
 & gt; 

      
 & lt; / 
 tr 
 & gt; 

      
 & lt; 
 tr 
 & gt; 

        
 & lt; 
 td 
 & gt; 
 Ann 
 & lt; / 
 td 
 & gt; 

        
 & lt; 
 td 
 & gt; 
 19 
 & lt; / 
 td 
 & gt; 

      
 & lt; / 
 tr 
 & gt; 

      
 & lt; 
 tr 
 & gt; 

        
 & lt; 
 td 
 & gt; 
 Susie 
 & lt; / 
 td 
 & gt; 

        
 & lt; 
 td 
 & gt; 
 22 
 & lt; / 
 td 
 & gt; 

      
 & lt; / 
 tr 
 & gt; 

    
 & lt; / 
 bảng 
 & gt; 

  
 & lt; / 
 body 
 & gt; 

 & lt; / 
 html 
 & gt; 
  

Hãy tự mình thử »

Cách tạo đường viền tròn

Bạn cũng có thể có các đường viền được làm tròn bằng cách sử dụng thuộc tính CSS border-radius . Hãy nhớ rằng trong trường hợp này, bạn nên xóa thuộc tính border-sập để sản phẩm hoạt động bình thường. Hãy xem một ví dụ trong đó tất cả các phần tử của bảng đều được làm tròn.

Ví dụ về cách thêm đường viền tròn vào bảng HTML:

 
 & lt; 
 html 
 & gt; 

  
 & lt; 
 head 
 & gt; 

    
 & lt; 
 title 
 & gt; 
 Tiêu đề của tài liệu 
 & lt; / 
 title 
 & gt; 

    
 & lt; 
 style 
 & gt; 
 

      
 bảng 
,
      
 td 
,
      
 th 
 {
        
 padding 
: 
 10px 
;
        
 border 
: 
 2px 
 solid 
 # 1c87c9 
;
        
 border-radius 
: 
 5px 
;
        
 background-color 
: 
 # e5e5e5 
;
 text-align 
: center;
      }
    
 
 & lt; / 
 style 
 & gt; 

  
 & lt; / 
 head 
 & gt; 

  
 & lt; 
 body 
 & gt; 

    
 & lt; 
 bảng 
 & gt; 

      
 & lt; 
 tr 
 & gt; 

        
 & lt; 
 th 
 & gt; 
 Người 
 & lt; / 
 th 
 & gt; 

        
 & lt; 
 th 
 & gt; 
 Tuổi 
 & lt; / 
 th 
 & gt; 

      
 & lt; / 
 tr 
 & gt; 

      
 & lt; 
 tr 
 & gt; 

        
 & lt; 
 td 
 & gt; 
 Ann 
 & lt; / 
 td 
 & gt; 

        
 & lt; 
 td 
 & gt; 
 19 
 & lt; / 
 td 
 & gt; 

      
 & lt; / 
 tr 
 & gt; 

      
 & lt; 
 tr 
 & gt; 

        
 & lt; 
 td 
 & gt; 
 Susie 
 & lt; / 
 td 
 & gt; 

        
 & lt; 
 td 
 & gt; 
 22 
 & lt; / 
 td 
 & gt; 

      
 & lt; / 
 tr 
 & gt; 

    
 & lt; / 
 bảng 
 & gt; 

  
 & lt; / 
 body 
 & gt; 

 & lt; / 
 html 
 & gt; 
  

Hãy tự mình thử »

Cách thêm đường viền vào & lt; p & gt ;, & lt; h2 & gt; hoặc & lt; div & gt; các phần tử

Theo cách tương tự, bạn có thể thêm đường viền vào các phần tử HTML khác. Hãy xem ví dụ về cách thêm đường viền vào các phần tử & lt; p & gt; , & lt; h2 & gt; và & lt; div & gt; .

Ví dụ về cách thêm đường viền vào & lt; p & gt ;, & lt; h2 & gt; và & lt; div & gt; các phần tử:

 
 & lt; 
 html 
 & gt; 

  
 & lt; 
 head 
 & gt; 

    
 & lt; 
 title 
 & gt; 
 Tiêu đề của tài liệu 
 & lt; / 
 title 
 & gt; 

    
 & lt; 
 style 
 & gt; 
 

      
 h2 
,
      
 div 
,
      
 p 
 {
        
 padding 
: 
 10px 
;
      }
      
 h2 
 {
        
 border 
: 
 3px 
 double 
 # 1c87c9 
;
        
 background-color 
: 
 # d9d9d9 
;
      }
      
 div 
 {
        
 border-left 
: 
 5px 
 solid 
 # 1c87c9 
 ;
        
 background-color 
: 
 # cccccc 
      }
      
 p 
 {
        
 border 
: 
 10px 
 rãnh 
 # 8ebf42 
;
      }
    
 
 & lt; / 
 style 
 & gt; 

  
 & lt; / 
 head 
 & gt; 

  
 & lt; 
 body 
 & gt; 

    
 & lt; 
 h2 
 & gt; 
 Ví dụ về đường viền 
 & lt; / 
 h2 
 & gt; 

    
 & lt; 
 div 
 & gt; 
 Ví dụ Div cho thuộc tính border. 
 & lt; / 
 div 
 & gt; 

    
 & lt; 
 p 
 & gt; 
 Một số đoạn có đường viền. 
 & lt; / 
 p 
 & gt; 

  
 & lt; / 
 body 
 & gt; 

 & lt; / 
 html 
 & gt; 
  

Hãy tự mình thử »

Nếu bạn muốn có đường viền tròn trên các đoạn văn, hãy làm theo ví dụ bên dưới để tìm hiểu cách thực hiện. Sử dụng thuộc tính border-radius để có được kết quả mong muốn của bạn.

Ví dụ về cách tạo viền bo tròn trên đoạn văn:

 
 & lt; 
 html 
 & gt; 

  
 & lt; 
 head 
 & gt; 

    
 & lt; 
 title 
 & gt; 
 Tiêu đề của tài liệu 
 & lt; / 
 title 
 & gt; 

    
 & lt; 
 style 
 & gt; 
 

      
 p 
 {
        
 padding 
: 
 10px 
;
      }
      
 p 
 
. normal 
 {
        
 border 
: 
 2px 
 solid 
 # 1c87c9 
;
      }
      
 p 
 
. round1 
 {
        
 border 
: 
 2px 
 solid 
 # 1c87c9 
;
        
 border-radius 
: 
 5px 
;
      }
      
 p 
 
. round2 
 {
        
 border 
: 
 2px 
 solid 
 # 1c87c9 
;
        
 border-radius 
: 
 8px 
;
      }
      
 p 
 
. round3 
 {
        
 border 
: 
 2px 
 solid 
 # 1c87c9 
;
        
 border-radius 
: 
 12px 
;
      }
    
 
 & lt; / 
 style 
 & gt; 

  
 & lt; / 
 head 
 & gt; 

  
 & lt; 
 body 
 & gt; 

    
 & lt; 
 h2 
 & gt; 
 Đường viền tròn 
 & lt; / 
 h2 
 & gt; 

    
 & lt; 
 p 
 
 class 
 = 
" normal "
 & gt; 
 Đường viền bình thường 
 & lt; / 
 p 
 & gt; 
    
 & lt; 
 p 
 
 class 
 = 
" round1 "
 & gt; 
 Đường viền tròn 
 & lt; / 
 p 
 & gt; 
    
 & lt; 
 p 
 
 class 
 = 
" round2 "
 & gt; 
 Đường viền tròn 
 & lt; / 
 p 
 & gt; 
    
 & lt; 
 p 
 
 class 
 = 
" round3 "
 & gt; 
 Đường viền tròn nhất 
 & lt; / 
 p 
 & gt; 
  
 & lt; / 
 body 
 & gt; 

 & lt; / 
 html 
 & gt; 
  

Hãy tự mình thử »

Xem thêm những thông tin liên quan đến chủ đề kiểu viền bảng html mỏng

HTML Table tag tutorial | How to make table in HTML | HTML TABLE, TR, TH, TD tags

• Tác giả: Copahost Web Hosting
• Ngày đăng: 2020-04-30
• Đánh giá: 4 ⭐ ( 5755 lượt đánh giá )
• Khớp với kết quả tìm kiếm: How to make HTML tables, using the HTML table tag. The video explains everything about how to style an html table, HTML table color and border, HTML table align and attributes. Also about HTML table background colors. HTML table tutorial about how to make table in html.

  Adding lines (rows) with the TR tag.
  How to add columns, with the TD tag.
  Customizing the HTML table rowspan, colspan, cellpadding and borders.
  Using the html TH tag (table heading)
  Custom font sizes and colors inside a table.
  Customizing the HTML table color and background color.

  In this video I’m going to show you how to use HTML tables. The tag for the HTML tables is called “table”. This is how it looks like. This is the standard HTML table tag.

  To make a table row, you need to use the TR tag, or HTML TR. Each TR tag shows one line inside your table.

  Inside each TR tag you have to use TD tags (or the HTML TD). Each TD tags means one column

  inside your table. In this example we are going to use one TR tag which is one line in your table and then two TD tags which are two columns inside this line.

  We show how to use the HTML table border attribute.

  So if you use another TR tag we’re going to add a new line to the table just like this. The cellpadding is an attribute for a spacing inside each HTML table cell.

  The attribute colspan will make one item occup two item spaces, two columns.

  I’m going to show the TH tag. TH simply means table heading.

  We can manually center a content of a TD using the align attribute for instance.

  Now we can customize the background color of a cell using the CSS style attribute. HTML CSS table design. I have added the style attribute to, for instance, the TR tag. You can use these
  attributes or in the TD or in the TH .

  We can customize the font colors using another style attribute with color within tables in HTML.

Cách Tạo Bảng Đẹp Trong Html Mới Nhất 2020, Cách Tạo Bảng (Table) Trong Html

• Tác giả: ruby-forum.org
• Đánh giá: 3 ⭐ ( 1536 lượt đánh giá )
• Khớp với kết quả tìm kiếm: “Hãy hòa nhã với những kẻ dở hơi, Ai biết được ngày sau bạn có thể phải làm việc cho một kẻ như vậy

Bảng trong HTML

• Tác giả: webvn.com
• Đánh giá: 3 ⭐ ( 4031 lượt đánh giá )
• Khớp với kết quả tìm kiếm: Ví dụ và cách sử dụng cũng như trang trí bảng trong HTML.

Table trong HTML

• Tác giả: viettuts.vn
• Đánh giá: 3 ⭐ ( 2524 lượt đánh giá )
• Khớp với kết quả tìm kiếm: Thẻ table trong HTML được sử dụng để hiển thị dữ liệu ở dạng bảng (hàng * cột). Có thể có nhiều cột trong một hàng. Các thẻ table trong HTML được sử dụng để

Share and store technology knowledge

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

Cách xóa hoàn toàn viền khỏi bảng HTML

• Tác giả: qastack.vn
• Đánh giá: 5 ⭐ ( 4485 lượt đánh giá )
• Khớp với kết quả tìm kiếm: [Tìm thấy giải pháp!]
  Và trong css: table {border: none;} EDIT: Như iGEL đã lưu ý, giải…

  Table trong HTML

  • Tác giả: quantrimang.com
  • Đánh giá: 3 ⭐ ( 2200 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Tạo bảng trong HTML thì cần những gì? Nó có phức tạp không? Muốn thêm màu cho đường viền bảng, thêm màu nền cho chữ trong bảng thì làm như thế nào? Trong bài viết này Quantrimang.com sẽ trả lời những câu hỏi đó và hướng dẫn bạn những thao tác cơ bản với bảng trên HTML, ngoài ra còn khuyến mại thêm cách tô màu xen kẽ cho các hàng trong bảng HTML. Mời các bạn cùng theo dõi.

  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

  Xem Thêm  Thêm giây vào đối tượng Ngày - GeeksforGeeks - ngày js từ giây