Trang chủ Thế giới ngôn ngữ lập trình - Programming Languages Tự học HTML Bảng – Tables trong HTML

[Tự học HTML] Bảng – Tables trong HTML

HTML Tables

Bởi

David Xuân

23 Tháng Bảy, 2020

788

🔥CHỌN LỌC TOP NHỮNG KHOÁ HỌC LẬP TRÌNH ONLINE NHIỀU NGƯỜI THEO HOC TẠI ĐÂY🔥

Cafedev chia sẻ cho ace về Các bảng trong HTML cho phép các develop web sắp xếp dữ liệu thành các hàng và cột.

Ví dụ bảng sau:

2.0	Phần tử(Elements) trong HTML
2.1	Thuộc tính(Attributes) trong HTML
2.2	Tìm hiểu về Tiêu đề(Heading), Văn bản(Paragraphs) trong HTML
2.3	Kiểu dáng(Styles) trong HTML
2.4	Định dạng văn bản trong HTML

<!--
Cafedev.vn - Kênh thông tin IT hàng đầu Việt Nam
@author cafedevn
Contact: cafedevn@gmail.com
Fanpage: https://www.facebook.com/cafedevn
Group: https://www.facebook.com/groups/cafedev.vn/
Instagram: https://instagram.com/cafedevn
Twitter: https://twitter.com/CafedeVn
Linkedin: https://www.linkedin.com/in/cafe-dev-407054199/
Pinterest: https://www.pinterest.com/cafedevvn/
YouTube: https://www.youtube.com/channel/UCE7zpY_SlHGEgo67pHxqIoA/
-->

<!DOCTYPE html>
<html>
<head>
<style>
table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

td, th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

tr:nth-child(even) {
  background-color: #dddddd;
}
</style>
</head>
<body>

<h2>HTML Table</h2>

<table>
  <tr>
    <th>STT</th>
    <th>Tỉnh</th>
    <th>Số Lượng</th>
  </tr>
  <tr>
    <td>1</td>
    <td>HCM</td>
    <td>3</td>
  </tr>
  <tr>
    <td>2</td>
    <td>HN</td>
    <td>38</td>
  </tr>
  <tr>
    <td>3</td>
    <td>Đà Nẵng</td>
    <td>80</td>
  </tr>
  <tr>
    <td>4</td>
    <td>Tiền Giang</td>
    <td>89</td>
  </tr>
  <tr>
    <td>5</td>
    <td>Tây Giang</td>
    <td>45</td>
  </tr>
  <tr>
    <td>6</td>
    <td>Hà Giang</td>
    <td>66</td>
  </tr>
</table>

</body>
</html>

Copy and chạy code

Nội dung chính

1. Tạo bảng trong HTML

Thẻ <table> dùng để tạo bảng trong HTML.

Mỗi hàng trong bảng được xác định bằng thẻ <tr>. Mỗi tiêu đề bảng được xác định bằng thẻ <th>. Mỗi dữ liệu / ô của bảng được xác định bằng thẻ <td>.

Theo mặc định, văn bản trong các phần tử <th> được in đậm và căn giữa.

Theo mặc định, văn bản trong các phần tử <td> là thông thường và được căn trái.

 <table style="width:100%">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Xuan</td>
    <td>60</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>David</td>
    <td>100</td>
  </tr>
</table>

Copy and chạy code

Lưu ý: Các phần tử <td> là các thùng chứa dữ liệu của bảng.
Chúng có thể chứa tất cả các loại phần tử HTML; văn bản, hình ảnh, danh sách, bảng khác, vv

2. Table với viền(border)

Để thêm đường viền vào bảng, hãy sử dụng thuộc tính border trong CSS:

table, th, td {
  border: 1px solid black;
}

Ví dụ:

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
  border: 1px solid black;
}
</style>
</head>
<body>

<h2>Table With Border</h2>

<p>Use the CSS border property to add a border to the table.</p>

<table style="width:100%">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th> 
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>
    <td>80</td>
  </tr>
</table>

</body>
</html>

Copy and chạy code

3. Table với border thu gọn

Để cho các đường viền thu gọn thành một đường viền, hãy thêm thuộc tính border-collapse trong CSS:

table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}

Ví dụ:

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}
</style>
</head>
<body>

<h2>Collapsed Borders</h2>
<p>If you want the borders to collapse into one border, add the CSS border-collapse property.</p>

<table style="width:100%">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th> 
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>
    <td>80</td>
  </tr>
</table>

</body>
</html>

Copy and chạy code

4. Table với Padding mỗi Ô

Padding mỗi ô chỉ định không gian giữa nội dung ô và viền của nó.

Nếu bạn không chỉ định phần đệm(Padding), các ô của bảng sẽ được hiển thị mà không cần phần đệm.

Để đặt phần đệm, hãy sử dụng thuộc tính phần padding CSS:

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}
th, td {
  padding: 15px;
}
</style>
</head>
<body>

<h2>Cellpadding</h2>
<p>Cell padding specifies the space between the cell content and its borders.</p>

<table style="width:100%">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th> 
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>
    <td>80</td>
  </tr>
</table>

<p><strong>Tip:</strong> Try to change the padding to 5px.</p>

</body>
</html>

Copy and chạy code

5. Table với Left-align Headings, Border Spacing,

text-align

Theo mặc định, các tiêu đề bảng được in đậm và chính giữa.

Để căn chỉnh bên trái các tiêu đề bảng, hãy sử dụng thuộc tính text-align CSS:

th {
  text-align: left;
}

border-spacing

Khoảng cách viền chỉ định khoảng cách giữa các ô.

Để đặt khoảng cách viền cho bảng, hãy sử dụng thuộc tính border-spacing CSS:

table {
  border-spacing: 5px;
}

Ví dụ:

<!--
Cafedev.vn - Kênh thông tin IT hàng đầu Việt Nam
@author cafedevn
Contact: cafedevn@gmail.com
Fanpage: https://www.facebook.com/cafedevn
Group: https://www.facebook.com/groups/cafedev.vn/
Instagram: https://instagram.com/cafedevn
Twitter: https://twitter.com/CafedeVn
Linkedin: https://www.linkedin.com/in/cafe-dev-407054199/
Pinterest: https://www.pinterest.com/cafedevvn/
YouTube: https://www.youtube.com/channel/UCE7zpY_SlHGEgo67pHxqIoA/
-->

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
  border: 1px solid black;
  padding: 5px;
}
table {
  border-spacing: 15px;
}
th {
  text-align: left;
}
</style>
</head>
<body>

<h2>Border Spacing + Text Align</h2>
<p>Theo mặc định, các tiêu đề bảng được in đậm và chính giữa.</p>
<p>Khoảng cách viền chỉ định khoảng cách giữa các ô.</p>

<table style="width:100%">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th> 
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>
    <td>80</td>
  </tr>
</table>

</body>
</html>

6. Table với span(kéo dài) nhiều cột và nhiều hàng

Span nhiều cột

Để tạo một khoảng ô nhiều hơn một cột, hãy sử dụng thuộc tính colspan:

<!--
Cafedev.vn - Kênh thông tin IT hàng đầu Việt Nam
@author cafedevn
Contact: cafedevn@gmail.com
Fanpage: https://www.facebook.com/cafedevn
Group: https://www.facebook.com/groups/cafedev.vn/
Instagram: https://instagram.com/cafedevn
Twitter: https://twitter.com/CafedeVn
Linkedin: https://www.linkedin.com/in/cafe-dev-407054199/
Pinterest: https://www.pinterest.com/cafedevvn/
YouTube: https://www.youtube.com/channel/UCE7zpY_SlHGEgo67pHxqIoA/
-->

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}
th, td {
  padding: 5px;
  text-align: left;    
}
</style>
</head>
<body>

<h2>Một cell kéo dài 2 cột</h2>
<p>Để kéo dài bao nhiêu cột thì đổi giá trị colspan </p>

<table style="width:100%">
  <tr>
    <th>Name</th>
    <th colspan="3">Telephone</th>
  </tr>
  <tr>
    <td>David Xuan</td>
    <td>55577854</td>
    <td>55577855</td>
  </tr>
</table>

</body>
</html>

Span nhiều dòng

Để tạo một ô kéo dài hơn một hàng, hãy sử dụng thuộc tính rowspan:

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}
th, td {
  padding: 5px;
  text-align: left;    
}
</style>
</head>
<body>

<h2>Một Cell kéo dài trong 2 dòng</h2>
<p>Thay đổi giá trị rowspan để một ô kéo dài nhiều dòng</p>

<table style="width:100%">
  <tr>
    <th>Name:</th>
    <td>Bill Gates</td>
  </tr>
  <tr>
    <th rowspan="2">Telephone:</th>
    <td>55577854</td>
  </tr>
  <tr>
    <td>55577855</td>
  </tr>
</table>

</body>
</html>

7. Table với chú thích – tạo style cho một table

Thêm chú thích cho table

Để thêm chú thích vào bảng, hãy sử dụng thẻ <caption>:

 <table style="width:100%">
  <caption>Monthly savings</caption>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$50</td>
  </tr>
</table>

Lưu ý: Thẻ <caption> phải được chèn ngay sau thẻ <table>.

Tạo style cho một table

Để xác định kiểu đặc biệt cho một bảng cụ thể, hãy thêm thuộc tính id vào bảng:

 <table id="t01">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>David</td>
    <td>Xuan</td>
    <td>94</td>
  </tr>
</table>

Bây giờ bạn có thể xác định một kiểu đặc biệt cho bảng này:

#t01 {
  width: 100%;
  background-color: #f1f1c1;
}
#t01 tr:nth-child(even) {
  background-color: #eee;
}
#t01 tr:nth-child(odd) {
  background-color: #fff;
}
#t01 th {
  color: white;
  background-color: black;
}

Nếu bạn thấy hay và hữu ích, bạn có thể tham gia các kênh sau của cafedev để nhận được nhiều hơn nữa:

Chào thân ái và quyết thắng!

[Tự học HTML] Bảng – Tables trong HTML

1. Tạo bảng trong HTML

2. Table với viền(border)

3. Table với border thu gọn

4. Table với Padding mỗi Ô

5. Table với Left-align Headings, Border Spacing,

6. Table với span(kéo dài) nhiều cột và nhiều hàng

7. Table với chú thích – tạo style cho một table

Đăng ký kênh youtube để ủng hộ Cafedev nha các bạn, Thanks you!

BÀI VIẾT TIÊU BIỂU

Chia sẻ | Vue trên Rails

Tip | Tối ưu hóa Dự án Frontend (React, Vue) Cho...

Chia sẻ | Các Framework Frontend Hàng Đầu Đang Tạo Nên...

BÀI VIẾT PHỔ BIẾN

Tổng hợp toàn bộ tài liệu học hướng đối tượng và...

Tổng hợp và chọn lọc bài tập SQL full hướng dẫn...

Giới thiệu chi tiết về CI-CD và những điều cần thiết...

MỤC XEM NHIỀU