You don't have javascript enabled! Please download Google Chrome!
  1. Trang chủ
  2. Frontend
  3. HTML
  4. Kẻ khung viền cho các bảng trong HTML bằng thuộc tính Border trong thẻ Table

Kẻ khung viền cho các bảng trong HTML bằng thuộc tính Border trong thẻ Table

Chúng ta sẽ học một chút về các thuộc tính của thẻ Table nhé!

Xem thêm bài viết

Tạo được một bảng trong HTML đã là một thành công đối với người mới học HTML. Nói đúng hơn là nhiều người cảm thấy rất vi diệu khi tạo ra được một bảng trong HTML. Bảng thì đã tạo xong rồi. Các dữ liệu đều được sắp xếp tương đối chỉn chu. Nhưng bạn vẫn cảm thấy khá là khó nhìn. Nhất là đối với những bảng có chứa số liệu. Lúc này thì bạn cần phải kẻ viềncho dễ nhìn số liệu hơn. Bảng mà bạn vừa tạo có thể không có số liệu mà có thể chứa trong bảng là hình ảnh. Hình ảnh trong bảng sẽ được tạo ra nhằm phục vụ cho các trang thương mại. Thông thường các trang này sẽ trưng bày sản phẩm ngay trên giao diện chính của các trang web. Đối với các trang web này thường không cần kẻ ô. Vì nếu bạn kẻ viềnthì trông khá mất thẩm mỹ. Nên thường thì những bảng này sẽ được giấu đi. Cách trình bày bảng không kẻ viền giống như những gì chúng ta đã từng học ở bài trước.

Còn đối với những bảng cần phải kẻ viền khung thì hôm nay mình sẽ hướng dẫn cho các bạn. Bạn muốn kẻ viền khung cho bảng thì trước tiên bạn phải suy nghĩ đến một thẻ hay một thuộc tính nào đó. Bạn đang đi đúng hướng rồi đó. Viền trong tiếng Anh là Border. Bạn đang nghĩ về thẻ Border trong HTML. Mình nghĩ là không bao giờ có thẻ đó đâu. Như vậy bạn đang nghĩ đến thuộc tính Border. Chính xác rồi! Bài viết này sẽ hướng dẫn cho các bạn các kẻ khung viền trong bảng.

Kẻ  viền cho bảng trong Table như thế nào?

Bạn sẽ thêm thuộc tính vào thẻ mở của thẻ Table. Nếu bạn muốn tuỳ chỉnh một thẻ nào đó cho đúng ý bạn thì bạn chỉ cần quan tâm đến thẻ mở của mỗi thẻ. Lưu ý là chỉ đúng trong trường hợp thẻ có cả thẻ mở và thẻ đóng.

Cú pháp

<table border= “…”>

…

</table>

 

Trong đó

“…” chứa hai giá trị.

  • 1 : kẻ khung viền
  • 0: không kẻ khung viền (kiểu mặc định).

Cùng xem ví dụ để hiểu hơn về các kẻ khung viền cho bảng

Ví dụ

 

<!doctype html>
<html>
    <head>
        <title>Trang web giới thiệu ẩm thực sáng tạo</title>
        <meta charset="utf-8"/>
        <meta name="keywords" content="Thức ăn, nước uống, địa điểm hay"/>
        <meta name="description" content="Trang web giới thiệu ẩm thực Sài Gòn"/>
        
    </head>
    <body>
        <a href="try.html">Trang chủ</a>
        <a href ="thuc-don.html">Thực Đơn</a>
        <a href="lien-he.html">Liên Hệ</a>
        <h1>Thực Đơn</h1>
        <ul>
            <li><a href="#">Mì vịt tiềm</a></li>
            <li><a href="#">Mì gà quay</a></li>
            <li><a href="#">Há cảo</a></li>
            <li><a href="#">Mì hoành thánh</a></li>
            <li><a href="#">Bánh tráng nướng</a></li>
            <li><a href="#">Hột vịt lộn</a></li>
        </ul>
        
        <a href="try.html"><img src="images/arrow-back-icon.png" width="80" height="80"/></a>
            
            <table border="1">
                <tr>
                    <td></td>
                    <td>Thứ 2</td>
                    <td>Thứ 3</td>
                    <td>Thứ 4</td>
                    <td>Thứ 5</td>
                    <td>Thứ 6</td>
                    <td>Thứ 7</td>
                    <td>Chủ Nhật</td>
                </tr>
                <tr>
                    <td>Tim</td>
                    <td>Công tác</td>
                    <td>Công tác</td>
                    <td>Công tác</td>
                </tr>
                <tr>
                    <td>Edwards</td>
                    <td>Làm việc tại văn phòng</td>
                    <td>Tham gia hội thảo</td>
                    <td></td>
                    <td>Họp với sếp</td>
                    <td>Nộp báo cáo</td>
                    <td></td>
                    <td></td>
                </tr>
                <tr>
                    <td>Emily</td>
                    <td colspan="4">Làm việc tại văn phòng</td>
                    
                </tr>
                <tr>
                    <td>Nathan</td>
                    <td colspan="2">Làm việc tại văn phòng</td>
                    <td></td>
                    <td colspan="2">Làm việc tại văn phòng</td>
                    <td></td>
                    <td>Đi Công Tác</td>
                </tr>
            </table><br/>
            <table border="1">
			
			<tr>
				<td colspan="2">Thời gian</td>
				<td></td>
				<td>Công việc</td>
			</tr>
			<tr>
				<td rowspan="2">Thứ 2</td>
				<td>Sáng</td>
				<td>Review Project A</td>
			</tr>
			<tr>
				<td>Chiều</td>
				<td>Meeting</td>
			</tr>
		</table>
      <br/>
       <table border="1">
                <tr>
                    <td></td>
                    <td>Cay</td>
                    <td>Chua</td>
                    <td>Mặn</td>
                    <td>Ngọt</td>
                    <td>Đắng</td>
                    <td>Béo</td>
                    <td>Thanh</td>
                    <td>Đa mùi vị</td>
                    <td>Nhiều dầu</td>
                    <td>Giá cả</td>
                </tr>
                <tr>
                    <td>Thái Lan</td>
                    <td><img src="images/check.png" alt="Có" title="Có" width="20px" height="20px"/></td>
                    <td><img src="images/check.png" alt="Có" title="Có" width="20px" height="20px"/></td>
                    <td></td>
                    <td><img src="images/check.png" alt="Có" title="Có" width="20px" height="20px"/></td>
                    <td></td>
                    <td><img src="images/check.png" alt="Có" title="Có" width="20px" height="20px"/></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td>Vừa phải trung bình khoảng 30-50k/món</td>
                </tr>
                <tr>
                    <td>Ấn Độ</td>
                    <td><img src="images/check.png" alt="Có" title="Có" width="20px" height="20px"/></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td><img src="images/check.png" alt="Có" title="Có" width="20px" height="20px"/></td>
                    <td></td>
                    <td>Khá rẻ</td>
                </tr>
                <tr>
                    <td>Pháp</td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td><img src="images/check.png" alt="Có" title="Có" width="20px" height="20px"/></td>
                    <td></td>
                    <td><img src="images/check.png" alt="Có" title="Có" width="20px" height="20px"/></td>
                    <td><img src="images/check.png" alt="Có" title="Có" width="20px" height="20px"/></td>
                    <td></td>
                    <td></td>
                    <td>Khá đắt</td>
                    
                </tr>
                <tr>
                    <td>Trung Quốc</td>
                    <td><img src="images/check.png" alt="Có" title="Có" width="20px" height="20px"/></td>
                    <td><img src="images/check.png" alt="Có" title="Có" width="20px" height="20px"/></td>
                    <td><img src="images/check.png" alt="Có" title="Có" width="20px" height="20px"/></td>
                    <td><img src="images/check.png" alt="Có" title="Có" width="20px" height="20px"/></td>
                    <td><img src="images/check.png" alt="Có" title="Có" width="20px" height="20px"/></td>
                    <td><img src="images/check.png" alt="Có" title="Có" width="20px" height="20px"/></td>
                    <td><img src="images/check.png" alt="Có" title="Có" width="20px" height="20px"/></td>
                    <td><img src="images/check.png" alt="Có" title="Có" width="20px" height="20px"/></td>
                    <td><img src="images/check.png" alt="Có" title="Có" width="20px" height="20px"/></td>
                    <td>Chấp nhận được</td>
                </tr>
                <tr>
                    <td>Đài Loan</td>
                    <td></td>
                    <td></td>
                    <td><img src="images/check.png" alt="Có" title="Có" width="20px" height="20px"/></td>
                    <td><img src="images/check.png" alt="Có" title="Có" width="20px" height="20px"/></td>
                    <td></td>
                    <td><img src="images/check.png" alt="Có" title="Có" width="20px" height="20px"/></td>
                    <td><img src="images/check.png" alt="Có" title="Có" width="20px" height="20px"/></td>
                    <td></td>
                    <td><img src="images/check.png" alt="Có" title="Có" width="20px" height="20px"/></td>
                    <td>Chấp nhận được</td>   
                </tr>
                <tr>
                    <td>Hongkong</td>
                    <td><img src="images/check.png" alt="Có" title="Có" width="20px" height="20px"/></td>
                    <td><img src="images/check.png" alt="Có" title="Có" width="20px" height="20px"/></td>
                    <td><img src="images/check.png" alt="Có" title="Có" width="20px" height="20px"/></td>
                    <td><img src="images/check.png" alt="Có" title="Có" width="20px" height="20px"/></td>
                    <td><img src="images/check.png" alt="Có" title="Có" width="20px" height="20px"/></td>
                    <td><img src="images/check.png" alt="Có" title="Có" width="20px" height="20px"/></td>
                    <td><img src="images/check.png" alt="Có" title="Có" width="20px" height="20px"/></td>
                    <td><img src="images/check.png" alt="Có" title="Có" width="20px" height="20px"/></td>
                    <td><img src="images/check.png" alt="Có" title="Có" width="20px" height="20px"/></td>
                    <td>Khá đắt so với những món bình thường khác</td>
                    
                </tr>
                    
                    
                    
            </table>
    </body>
</html>

Kết quả ví dụ

Sau khi xem xong ví dụ bạn đã hiểu được cách kẻ khung viền cho bảng. Quá tuyệt vời! Bạn đã biết được cách để kẻ khung viền rồi. Giờ đây bạn hãy tự luyện tập để có thể kẻ được khung viền trong bảng. Chỉ cần thực hiện đúng như cú pháp là có thể kẻ viền cho bảng. Chúc bạn học tập thật tốt. Hẹn gặp các bạn ở những bài viết sau.




Đặt câu hỏi cho bài viết này ?