You don't have javascript enabled! Please download Google Chrome!
  1. Trang chủ
  2. Frontend
  3. HTML
  4. Tổng hợp các thuộc tính thường xuyên được sử dụng trong quá trình tạo bảng

Tổng hợp các thuộc tính thường xuyên được sử dụng trong quá trình tạo bảng

Chúng ta sẽ cùng tìm hiểu thêm một vài thuộc tính nữa của bảng trong HTML.

Xem thêm bài viết

Chúng ta đã học qua cách để tạo ra một bảng cơ bản trong HTML. Ngoài ra chúng ta còn học về cách để Merge cell cho bảng. Chúng ta còn thiếu những gì để hoàn thiện một bảng trong HTML. Có lẽ là còn thiếu khá nhiều đó. Các thuộc tính của thẻ Table trong HTML khá là nhiều. Đặc biệt bạn có thể tuỳ chỉnh khá nhiều với bảng trong HTML. Đó có lẽ là một lợi thế khá lớn dành cho bảng trong HTML.

Có khá nhiều thuộc tính chúng ta cần tìm hiểu trong bảng nhưng có lẽ chúng ta sẽ tìm hiểu trước một số thẻ hỗ trợ khá quan trọng trong HTML.

Muốn ghi tên bảng thì chúng ta phải làm gì?

Thật may mắn là trong HTML lại có thẻ có thể giúp bạn hoàn thành công việc này khá dễ dàng. Thẻ này có tên là Figcaption.

Cú pháp

<figcaption>Content</figcaption>

Bạn tất nhiên là chỉ có một thanh tiêu đề duy nhất trong toàn bảng. Vì vậy bạn cần phải lưu ý. Figcaption là thẻ nằm trong thẻ Table.

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">
               <figcaption>Lịch phân công</figcaption>
                <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>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></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>
                    <td></td>
                    <td></td>
                    <td></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">
			<figcaption>Thời gian biểu</figcaption>
			<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">
               <figcaption>Bảng so sánh vị của các món ăn</figcaption>
                <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ụ

Bảng gì mà không có viền thế này

Đừng vội nóng giận. Bảng trong HTML không viền là có lý do của nó. Thứ nhất cũng nhờ vào bảng nên ta dễ dàng tạo ra những chỗ trưng bày sản phẩm trong trang thương mại điện tử. Chắc bạn vẫn còn nhớ là các sản phẩm thường được xếp ngay hàng thẳng lối để khách hàng lựa chọn. Thế nên mặc định bảng không viền là đúng. Giống như Excel bạn vẫn có thể kẻ viền cho khung bạn muốn.

Thuộc tính chúng ta sẽ sử dụng trong trường hợp này có tên Border. Thuộc tính này được áp dụng trong thẻ Table. Ở bài trước chúng ta đã học về thuộc tính này rồi đúng không. Bạn có thể xem lại ví dụ đó tại đây.

Cú pháp

<table border= “…”>

…

</table>

 

Border chỉ có hai giá trị là 0 và 1. Bạn điền số 0 khi bạn không muốn viền khung cho bảng. Giá trị 0 vốn mặc định nên bạn không viết thì trình duyệt cũng hiểu là bạn đang muốn làm điều gì với bảng. Giá trị 1 thì khác. Đây là giá trị cho biết chúng ta muốn viền khung cho bảng. Như vậy thì khi trình duyệt đọc chúng sẽ hiểu là bạn đang muốn viền khung.

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ụ

Sao bảng tạo ra có tí xíu vậy?

Đó là do chúng ta chưa điều chỉnh kích thước cho bảng. Bây giờ chúng ta sẽ tiến hành điều chỉnh cho bảng. Chúng ta đã quá quen với thuộc tính Width rồi đúng không? Thuộc tính này sẽ giúp bạn điều chỉnh lại kích thước một cách dễ dàng. Bạn lưu ý là chúng ta sẽ thực hiện điều chỉnh bằng đơn vị Px (Pixel) và phần trăm (%).

Cú pháp

<table width= “…”>

…

</table>

 

Lưu ý bạn chỉ cần ghi số vào ô giá trị thuộc tính là được. Không cần phải ghi thêm chữ px. Trong khi đó nếu bạn sử dụng phần trăm thì bạn phải ghi % vào phía sau số bạn vừa mới quy định.

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" width="800px">
               <figcaption>Lịch phân công</figcaption>
                <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>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></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>
                    <td></td>
                    <td></td>
                    <td></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" width="800px">
			<figcaption>Thời gian biểu</figcaption>
			<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>
				<td></td>
			</tr>
			<tr>
				<td>Chiều</td>
				<td>Meeting</td>
				<td></td>
			</tr>
		</table>
      <br/>
       <table border="1" width="800px">
               <figcaption>Bảng so sánh vị của các món ăn</figcaption>
                <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ụ

Chúng ta đã học qua kha khá cách để tuỳ chỉnh bảng trong HTML. Còn rất nhiều tuỳ chỉnh thú vị khác. Tạm thời chúng ta ngừng ở đây vì các bạn cũng đã thấm mệt rồi. Bài tập của các bạn rất dễ. Các bạn hãy sử dụng bảng lần trước mà chúng ta đã tạo trong phần luyện tập ở những bài trước. Chúc bạn học vui!

 

 

 




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