VietTuts

Tự Học Lập Trình Online

  • Home
  • Java
  • Servlet
  • JSP
  • Struts2
  • Hibernate
  • Spring
  • MyBatis
  • Java WS
  • C
  • C++
  • C#
  • Python
  • PHP
  • Excel
  • VBA
  • Web
    • JavaScript
    • JQUERY
    • JSON
    • AJAX
    • CSS
    • HTML
    • HTML5
    • Node.js
    • Angular 7
  • SQL
    • MySQL
    • SQL Server
  • Misc
    • Eclipse
    • Phần mềm tiện ích
    • Cấu trúc DL&GT
    • Selenium Test

HTML Tuts

HTML là gì? Các thẻ HTML Định dạng trong HTML Tiêu đề trong HTML Đoạn văn trong HTML Liên kết trong HTML Ảnh trong HTML Table trong HTML Danh sách trong HTML Danh sách có thứ tự Danh sách không có thứ tự Danh sách mô tả Form trong HTML Thuộc tính Style Comment trong HTML Bảng màu trong HTML Thuộc tính chung trong HTML

Các thẻ HTML

Thẻ HTML Marquee Thẻ HTML Textarea HTML DOCTYPE Thẻ HTML Title Thẻ HTML meta Thẻ HTML Div Thẻ HTML Pre Thẻ HTML Code Thẻ HTML Label Thẻ HTML Input Thẻ HTML Button Thẻ HTML HR Thẻ HTML BR Thẻ HTML Script Thẻ HTML NoScript Thẻ HTML b Thẻ HTML Quotes

Bài học HTML

Text Link trong HTML Image Link trong HTML Email Link trong HTML Frame trong HTML Iframe trong HTML Block trong HTML Thiết lập màu nền (background) trong HTML Màu trong HTML Font trong HTML Thẻ embed - Đa phương tiện trong HTML Tạo chữ chạy (Marquee) trong HTML Style Sheet trong HTML Sử dụng Javascript trong HTML Layout trong HTML Tổng hợp thuộc tính trong HTML Sự kiện (Event) trong HTML Các Font tham khảo trong HTML Mã hóa ASCII trong HTML Bảng ASCII trong HTML Các thực thể HTML Mã hóa URL trong HTML Mã hóa các ngôn ngữ chuẩn ISO trong HTML Mã hóa ký tự trong HTML

Câu hỏi phỏng vấn

Phỏng vấn HTML
1 / 3
❮ ❯

Table trong HTML


HTML là gì?
Định dạng HTML

Nội dung chính

  • Table trong HTML
  • Các thẻ định nghĩa bảng trong HTML
  • Ví dụ về bảng trong HTML
  • Thuộc tính border của bảng trong HTML
    • 1. Sử dụng thuộc tính border của bảng trong HTML
    • 2. Sử dụng thuộc tính border trong CSS
  • Table trong HTML với cell padding
  • Thuộc tính colspan
  • Thuộc tính rowspan
  • Thẻ caption
  • Tạo style cho ô chẵn, lẻ

Table trong HTML

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 để quản lý việc bố cục trang web. Ví dụ: Phần tiêu đề, thanh điều hướng, nội dung trang, phần chân trang... Nhưng bạn nên sử dụng thẻ div thay vì table để quản lý bố cục của trang.

Các thẻ định nghĩa bảng trong HTML

ThẻMô tả
<table>Định nghĩa bảng.
<tr>Định nghĩa một hàng trong một bảng.
<th>Định nghĩa phần header (dòng đầu tiên) của bảng.
<td>Định nghĩa 1 ô của bảng.
<caption>Định nghĩa phụ đề bảng.
<colgroup>Chỉ định một nhóm của một hoặc nhiều cột trong một bảng để định dạng.
<col>Được sử dụng với thẻ <colgroup> để chỉ định thuộc tính cột cho mỗi cột.
<tbody>Được sử dụng để nhóm nội dung body trong một bảng.
<thead>Được sử dụng để nhóm nội dung header trong một bảng.
<tfooter>Được sử dụng để nhóm nội dung footer trong một bảng.

Ví dụ về bảng trong HTML

<table>  
<tr><th>First_Name</th><th>Last_Name</th><th>Marks</th></tr>  
<tr><td>Sonoo</td><td>Jaiswal</td><td>60</td></tr>
<tr><td>James</td><td>William</td><td>80</td></tr>
<tr><td>Swati</td><td>Sironi</td><td>82</td></tr>
<tr><td>Chetna</td><td>Singh</td><td>72</td></tr>
</table>

Output:

First_NameLast_NameMarks
SonooJaiswal60
JamesWilliam80
SwatiSironi82
ChetnaSingh72

Thuộc tính border của bảng trong HTML

Có hai cách để xác định border cho các bảng trong HTML.

  1. Sử dụng thuộc tính border của bảng trong HTML.
  2. Sử dụng thuộc tính border trong CSS.

1. Sử dụng thuộc tính border của bảng trong HTML

Bạn có thể sử dụng thuộc tính border của thẻ table trong HTML để chỉ định đường viền. Nhưng bạn không nên sử dụng cách này.

Ví dụ:

<table border="1">  
<tr><th>First_Name</th><th>Last_Name</th><th>Marks</th></tr>  
<tr><td>Sonoo</td><td>Jaiswal</td><td>60</td></tr>  
<tr><td>James</td><td>William</td><td>80</td></tr>  
<tr><td>Swati</td><td>Sironi</td><td>82</td></tr>  
<tr><td>Chetna</td><td>Singh</td><td>72</td></tr>  
</table>  

Output:

First_NameLast_NameMarks
SonooJaiswal60
JamesWilliam80
SwatiSironi82
ChetnaSingh72

2. Sử dụng thuộc tính border trong CSS

Bạn nên sử dụng thuộc tính border của CSS để chỉ định đường viền của bảng.

Ví dụ:

<html>
<head>
<!-- Sử dụng thuộc tính border bằng CSS -->
<style type="text/css"> 
table, th, td {  
    border: 1px solid red;
    border-collapse: collapse;
}
</style>
</head>
<body>
 <table>  
 <tr><th>First_Name</th><th>Last_Name</th><th>Marks</th></tr>  
 <tr><td>Sonoo</td><td>Jaiswal</td><td>60</td></tr>  
 <tr><td>James</td><td>William</td><td>80</td></tr>  
 <tr><td>Swati</td><td>Sironi</td><td>82</td></tr>  
 <tr><td>Chetna</td><td>Singh</td><td>72</td></tr>  
 </table>  
</body>
</html>

Output:

table trong html 2

Table trong HTML với cell padding

Bạn có thể chỉ định padding cho tiêu đề của bảng và data của bảng bằng hai cách:

  1. Bằng thuộc tính cellpadding của thẻ table trong HTML
  2. Bằng tính chất padding trong CSS

Bạn nên sử dụng tính chất của CSS thay vì thuộc tính của thẻ trong HTML, dưới đây là ví dụ chỉ định padding cho tiêu đề và nội dung của bẳng bằng CSS.

<style>  
table, th, td {  
    border: 1px solid pink;  
    border-collapse: collapse;  
}  
th, td {  
    padding: 10px;  
}  
</style>

Output:

table trong html 3

Thuộc tính colspan

Nếu bạn muốn tạo một ô có độ dài lơn hơn 1 cột, thì bạn có thể dùng thuộc tính colspan. Ví dụ:

Code css:

<style>  
table, th, td {  
    border: 1px solid black;  
    border-collapse: collapse;  
}  
th, td {  
    padding: 5px;  
}  
</style>

Code html:

<table style="width:100%">  
  <tr>  
    <th>Name</th>  
    <th colspan="2">Mobile No.</th>  
  </tr>  
  <tr>  
    <td>Ajeet Maurya</td>  
    <td>7503520801</td>  
    <td>9555879135</td>  
  </tr>  
</table>  

Output:

table-trong-html-thuoc-tinh-colspan

Thuộc tính rowspan

Nếu bạn muốn tạo một ô có độ dài lơn hơn hàng, thì bạn có thể dùng thuộc tính rowspan. Ví dụ:

Code css:

<style>  
table, th, td {  
    border: 1px solid black;  
    border-collapse: collapse;  
}  
th, td {  
    padding: 10px;  
}  
</style>  

Code html:

<table style="width:100%">  
  <tr>  
    <th>Name</th>  
    <th colspan="2">Mobile No.</th>  
  </tr>  
  <tr>  
    <td>Ajeet Maurya</td>  
    <td>7503520801</td>  
    <td>9555879135</td>  
  </tr>  
</table>  

Output:

table-trong-html-thuoc-tinh-rowspan

Thẻ caption

Thẻ caption được sử dụng để định nghĩa bảng, thẻ này chỉ được sử dụng ngay sau thẻ table. Ví dụ:

<table>  
<caption>Student Records</caption>  
<tr><th>First_Name</th><th>Last_Name</th><th>Marks</th></tr>  
<tr><td>Vimal</td><td>Jaiswal</td><td>70</td></tr>  
<tr><td>Mike</td><td>Warn</td><td>60</td></tr>  
<tr><td>Shane</td><td>Warn</td><td>42</td></tr>  
<tr><td>Jai</td><td>Malhotra</td><td>62</td></tr>  
</table>    

Output:

table-trong-html-the-caption

Tạo style cho ô chẵn, lẻ

Code css:

<style>  
table, th, td {  
    border: 1px solid black;  
    border-collapse: collapse;  
}  
th, td {  
    padding: 10px;  
}  
table#alter tr:nth-child(even) {  
    background-color: #eee;  
}  
table#alter tr:nth-child(odd) {  
    background-color: #fff;  
}  
table#alter th {  
    color: white;  
    background-color: gray;  
}  
</style>  

Output:

table-trong-html-style-chan-le
HTML là gì?
Định dạng HTML

Recent Updates

Liên kết css với htmlMã hóa ký tự trong HTMLMã hóa các ngôn ngữ chuẩn ISO trong HTMLMã hóa URL trong HTMLCác thực thể HTMLBảng ASCII trong HTMLMã hóa ASCII trong HTMLCác Font tham khảo trong HTMLSự kiện (Event) trong HTMLTổng hợp thuộc tính trong HTMLLayout trong HTMLSử dụng Javascript trong HTMLSắp Tết 2026 Rồi! - Còn bao nhiêu ngày nữa là đến tết 2026?

VietTuts on facebook

Học Lập Trình Online Miễn Phí - VietTuts.Vn
Danh Sách Bài Học

Học Java | Hibernate | Spring
Học Excel | Excel VBA
Học Servlet | JSP | Struts2
Học C | C++ | C#
Học Python
Học SQL

Bài Tập Có Lời Giải

Bài tập Java
Bài tập C
Bài tập C++
Bài tập C#
Bài tập Python
Ví dụ Excel VBA

Câu Hỏi Phỏng Vấn

201 câu hỏi phỏng vấn java
25 câu hỏi phỏng vấn servlet
75 câu hỏi phỏng vấn jsp
52 câu hỏi phỏng vấn Hibernate
70 câu hỏi phỏng vấn Spring
57 câu hỏi phỏng vấn SQL

Scroll back to top

Copyright © 2016 VietTuts.Vn all rights reserved. | Liên hệ | Chính sách - riêng tư | sitemap.html | sitemap_index.xml