NỘI DUNG

Hosting tốc độ cao Vietnix - tốc độ tải trang trung bình dưới 1 giây
VPS siêu tốc Vietnix - trải nghiệm mượt mà, ổn định
10/06/2024
Lượt xem

Table HTML – Giới thiệu và hướng dẫn cách tạo bảng trong HTML

10/06/2024
15 phút đọc
Lượt xem

Đánh giá

5/5 - (81 bình chọn)

Để sắp xếp và tối ưu hóa quá trình quản lý dữ liệu, các nhà phát triển web có thể sử dụng Table HTML – một phần tử HTML cho phép người dùng thể hiện dữ liệu dưới dạng bảng một cách trực quan và dễ hiểu nhất. Trong bài viết này, Vietnix sẽ cung cấp những thông tin hữu ích về Table HTML và cách tạo bảng nhanh chóng trong HTML, mời bạn cùng tham khảo tại đây. 

Giới thiệu Table HTML

Table (bảng) là phần tử HTML cho phép người dùng sắp xếp và trình bày dữ liệu theo dạng hàng và cột tương tự như một bảng tính thông thường. Với cấu trúc này, bạn có thể dễ dàng phân bổ các thành phần vào bảng một cách hợp lý và trực quan nhất với đầy đủ tiêu đề hàng, tiêu đề cột, tiêu đề hợp nhất…

Table HTML là phần tử giúp người dùng sắp xếp và trình bày dữ liệu theo bảng
Table HTML là phần tử giúp người dùng sắp xếp và trình bày dữ liệu theo bảng

Trong bảng, nội dung và dữ liệu sẽ được bao bọc bởi 2 cặp tag chính gồm:

<table></table>

Ngoài ra, bạn cũng cần đến các tag sau để tạo hàng và tạo cột trong HTML: 

<tr></tr> (tạo hàng)

<td></td> (tạo cột)

Dưới đây là ví dụ minh họa cho cách áp dụng Table HTML mà bạn có thể tham khảo: 

<table>
  <tr>
    <td>Ô 1</td>
    <td>Ô 2</td>
    <td>Ô 3</td>
  </tr>
  <tr>
    <td>Ô 4</td>
    <td>Ô 5</td>
    <td>Ô 6</td>
  </tr>
</table>

Lúc này, người dùng khi truy cập vào trang web sẽ nhìn thấy thông tin hiển thị như sau: 

Ô 1Ô 2Ô 3
Ô 4Ô 5Ô 6

Danh sách các tag phổ biến của Table HTML

Bên cạnh cặp tag <table> đã giới thiệu ở trên, bạn cũng cần phải nắm rõ một số tag thường gặp dưới đây để sử dụng trong quá trình lập trình dữ liệu Table với HTML: 

  • <th>: Xác định heading (tiêu đề) có trong bảng, thường nằm bên trong cặp tag <tr></tr>.
  • <tr>: Xác định một row (hàng) trong bảng. 
  • <td>: Được đặt trong cặp tag <tr></tr> và dùng để xác định 1 ô trong bảng. 
  • <caption>: Thêm chú thích cho bảng. 
  • <colgroup>: Xác định một nhóm trong bảng, có thể là một hoặc nhiều cột khác nhau. 
  • <col>: Xác định thuộc tính cho cột, thường được đặt trong tag <colgroup>.
  • <thead>: Thể hiện nội dung cho các heading trong bảng. 
  • <tbody>: Chứa các nội dung chính có trong bảng. 
  • <tfoot>: Thêm nội dung ở footer (chân trang) cho bảng. 

Hướng dẫn cách tạo bảng trong HTML đơn giản

Để tạo một bảng đơn giản trong HTML, bạn có thể bắt đầu với các bước cơ bản sau: 

Bước 1: Khởi tạo bảng

Đầu tiên, bạn khai báo cặp tag <table></table> trong file HTML để khởi tạo bảng, sau đó thêm các tag thành phần như <tr>, <td> vào trong cặp tag <table>. Dưới đây là một ví dụ mà bạn có thể tham khảo: 

<table>
  <td>Ô đầu tiên</td>
  <td>Ô thứ hai</td>
  <td>Ô thứ hai</td>
  <td>Ô thứ tư</td>
</table>

Sau cú pháp trên, bạn đã tạo thành công một bảng với một hàng, và mỗi phần tử <td> lại tương ứng với một ô. Tất cả các ô đều được căn chỉnh tự động với kích cỡ tương đương nhau: 

Ô đầu tiênÔ thứ haiÔ thứ baÔ thứ tư

Để thêm 1 – 2 hàng vào bảng đã tạo ở trên, bạn chỉ cần sử dụng phần tử table row <tr>. Lúc này, mỗi hàng được đặt trong một phần tử <tr> và mỗi ô lại được chứa trong một <td>, chẳng hạn như: 

<table>
  <tr>
    <td>Ô đầu tiên</td>
    <td>Ô thứ hai</td>
    <td>Ô thứ ba</td>
    <td>Ô thứ tư</td>
  </tr>
  <tr>
    <td>Hàng thứ hai, ô đầu tiên</td>
    <td>Hàng thứ hai, ô thứ 2</td>
    <td>Hàng thứ hai, ô thứ 3</td>
    <td>Hàng thứ hai, ô thứ 4</td>
  </tr>
</table>

Sau cú pháp trên, bạn sẽ nhận được kết quả như sau: 

Ô đầu tiênÔ thứ haiÔ thứ baÔ thứ tư
Hàng thứ hai, ô đầu tiênHàng thứ hai, ô thứ 2Hàng thứ hai, ô thứ 3Hàng thứ hai, ô thứ 4

Bước 2: Thêm tiêu đề (Table Header)

Sau khi khởi tạo bảng thành công, bạn tiếp tục sử dụng Table Header <th> để chỉ định ô bất kỳ nằm trong <tr> thành một header và có chức năng tương tự với <td>. Thông thường, ô heading sẽ được điều chỉnh theo kiểu in đậm, căn giữa để chúng trở nên nổi bật hơn so với các ô còn lại. 

<table>
  <tr>
    <th>Họ</th>
    <th>Tên</th>
    <th>Số điện thoại</th>
  </tr>
  <tr>
   <td>Trần</td>
   <td>Thảo</td>
   <td>0334424032</td>
  </tr>
  <tr>
    <td>Lê</td>
    <td>Tuấn</td>
    <td>0987654321</td>
  </tr>
</table>
HọTênSố điện thoại
TrầnThảo0334424032
Tuấn0987654321

Xem thêm: Custom Headers là gì? Hướng dẫn Custom Headers chi tiết, cụ thể trong WordPress.

Đối với các bảng có nhiều loại thông tin, cấu trúc chúng thường sẽ phực tạp hơn và bạn cần kết hợp với các thuộc tính khác như <thead>, <tbody><tfoot> để phân biệt giữa các thành phần đầu tiên, thành phần cuối và nội dung chính trong bảng.

Tag <thead> được sử dụng để cố định phần tiêu đề cho các bảng chứa nhiều dữ liệu, từ đó hỗ trợ cho việc phân loại và quản lý thông tin của người dùng. Trong khi đó, <tbody> cho phép người dùng tạo ra các scroll tách biệt với phần <thead> và <tfoot> là nội dung được cố định ở phía cuối bảng để mang đến kết luận cho một vấn đề nào đó. 

Dưới đây là cách sử dụng cơ bản cho các thuộc tính này trong Table HTML: 

  • <thead>: Dùng để gom nhóm tiêu đề cho bảng, thường được đặt ở hàng đầu tiên của bảng. Trong trường hợp người dùng sử dụng thêm thuộc tính <col> hoặc <colgroup>, <thead> sẽ ở ngay phía dưới chúng. 
  • <tfoot>: Dùng để tạo nội dung cố định ở phía cuối của bảng, thường là các cột chứa nội dung tổng kết như tính tổng, thành tiền…  
  • <tbody>: Dùng để bao bọc nội dung chính bên trong bảng, thường được đặt ngay phía dưới nội dung của <thead>

Lưu ý: Trong code table HTML, dù người dùng có đảo ngược vị trí của các thuộc tính như thế nào, thì chúng vẫn sẽ hiển thị theo đúng trình tự là <thead> – <tbody> – <tfoot>. Chẳng hạn như khi bạn viết <tbody> rồi mới đến <thead>, thì khi hiển thị trên web, chúng sẽ tự động đổi thành <thead> rồi mới đến <tbody>.

Dưới đây là ví dụ minh hoạt về cách sử dụng các thuộc tính <thead>, <tbody> và <tfoot>:

<table>
  <thead>
    <tr>
      <th colspan="2">Công ty A</th>
      <th colspan="2">Công ty B</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Số lượng nhân viên</td>
      <td>Điểm hài lòng</td>
      <td>Số lượng nhân viên</td>
      <td>Điểm hài lòng</td>
    </tr>
    <tr>
      <td>200</td>
      <td>4.3</td>
      <td>1000</td>
      <td>3.7</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th colspan= "4">Số liệu được cập nhật lần cuối: 10/06/2024</th>
    </tr>
  </tfoot>
</table>

Dưới đây là bảng được tạo nên từ cú pháp trên: 

Công ty ACông ty B
Số lượng nhân viênĐiểm hài lòngSố lượng nhân viênĐiểm hài lòng
2004.310003.7
Số liệu được cập nhật lần cuối: 10/06/2024

Trong ví dụ trên, phần header (tiêu đề) của bảng chính là danh sách tên công ty, số lượng nhân viên và điểm hài lòng được hiểu là body (phần thân) và footer (chân trang) là câu chú thích thời điểm cập nhật ở cuối bảng. 

Bước 4: Thêm Caption

Bằng cách thêm caption, bạn có thể giúp người đọc hiểu được nội dung chính sẽ được trình bày trong bảng. Để làm được điều này, hãy đặt cặp tag <caption> ở ngay phía sau cặp tag <table>. Thông thường, caption của bảng sẽ được căn giữa và đặt tại vị trí đầu bảng. Cụ thể là: 

<table>
  <caption>Thông tin về các tháng trong năm 2024</caption>
  <tr>
    <th>Tháng</th>
    <th>Số ngày</th>
    <th>Nhiệt độ trung bình</th>
  </tr>
  <tr>
    <td>1</td>
    <td>31</td>
    <td>25</td>
  </tr>
  <tr>
    <td>2</td>
    <td>29</td>
    <td>27</td>
  </tr>
  <tr>
    <td>3</td>
    <td>31</td>
    <td>28</td>
  </tr>
</table>

Cú pháp trên sẽ tạo nên bảng với caption cụ thể là: 

Thông tin về các tháng trong năm 2024
ThángSố ngàyNhiệt độ trung bình
13125
22927
33128

Bước 5: Thêm thuộc tính phạm vi (Scope Attribute)

Sau khi thêm caption, bạn có thể bổ sung thêm thuộc tính phạm vi Scope để xác định mối quan hệ giữa các ô tiêu đề và ô dữ liệu tương ứng trong một bảng. Thông qua đó, người dùng có thể dễ dàng hiểu được nội dung đang được trình bày, đồng thời hỗ trợ cho các công cụ đọc màn hình và công nghệ hỗ trợ người khuyết tật nhận biết một cách chính xác hơn. 

Bên cạnh đó, scope còn có thể chứa một trong 4 thuộc tính khác là col, row, colgroup và rowgroup, mỗi giá trị sẽ xác định phạm vi ổ tiêu đề đối với các cột hoặc hàng tương ứng, chẳng hạn như: 

<table>
  <tr>
    <th></th>
    <th scope="col">Tên</th>
    <th scope="col">Điểm</th>
  </tr>
  <tr>
    <td>1</td>
    <td>Anh</td>
    <td>10</td>
  </tr>
  <tr>
    <td>2</td>
    <td>Ánh</td>
    <td>9.5</td>
  </tr>
  <tr>
    <td>3</td>
    <td>Bình</td>
    <td>9.5</td>
  </tr>
</table>

Sau thao tác trên, chúng ta nhận được bảng như sau: 

TênĐiểm
1Anh10
2Ánh9.5
3Bình9.5

Bước 6: Sử dụng hợp nhất ô (Cell Spanning)

Đôi khi, để bảng trở nên trực quan và gọn gàng hơn, bạn cần phải hợp nhất một số dòng hoặc cột nhất định. Nếu như với các phần mềm quen thuộc như Excel hay MS Word, bạn chỉ cần hợp nhất các ô liên quan bằng tính năng merge, thì trong HTML, cũng có một số thuộc tính hỗ trợ bạn thực hiện điều này là <colspan><rowspan>.

<colspan> cho phép hợp nhất các ô theo hàng, còn <rowspan> được dùng để hợp nhất ô theo cột. Giá trị của chúng luôn lớn hơn 0 và bằng với số lượng ô mà bạn cần hợp nhất. Chẳng hạn như trong ví dụ dưới đây, chúng ta cần hợp nhất 3 ô theo chiều dọc và 2 ô theo chiều ngang. Lúc này, hãy sử dụng 2 thuộc tính <colspan>, <rowspan> với cú pháp sau: 

<table>
  <tr>
    <th>Tên</th>
    <th>Môn</th>
    <th>Điểm</th>
  </tr>
  <tr>
    <td rowspan = "2">Nam</td>
    <td>Nhập môn HTML</td>
    <td>75</td>
  </tr>
  <tr>
    <td>Nhập môn JavaScript</td>
    <td>60</td>
  </tr>
  <tr>
    <td rowspan = "2">Tâm</td>
    <td>Nhập môn HTML</td>
    <td>80</td>
  </tr>
  <tr>
    <td>Nhập môn JavaScript</td>
    <td>75</td>
  </tr>
  <tr>
    <td colspan="3">Trung bình: 72.5</td>
  </tr>
</table>

Lưu ý: Khi sử dụng hai thuộc tính trên, bạn cần check lại giá trị gán vào cú pháp một cách kỹ lưỡng để đảm bảo chúng không bị chồng chéo nhau. 

Sau cú pháp trên, ta có bảng như sau: 

TênMônĐiểm
NamNhập môn HTML75
Nhập môn JavaScript60
TâmNhập môn HTML80
Nhập môn JavaScript75
Trung bình: 72.5

Hướng dẫn cách định dạng bảng trong HTML

Để định dạng bảng trong HTML, bạn tham khảo hướng dẫn sau: 

Sử dụng <col> và <colgroup>

Trong Table HTML, bạn có thể sử dụng thuộc tính <col><colgroup> để highlight và làm nổi bật các thông tin quan trọng, hay chỉ đơn giản là khiến cho bảng trở nên đẹp mắt hơn khi hiển thị trên trang web. Trong đó <col> sẽ được đặt bên trong tag <colgroup>, còn <colgroup> nằm ở vị trí liền kề <table>. Cụ thể là: 

<table>
  <colgroup>
    <col />
    <col style="background-color: yellow" />
  </colgroup>
  <tr>
    <th>Tên</th>
    <th>Tuổi</th>
  </tr>
  <tr>
    <td>Thanh</td>
    <td>33</td>
  </tr>
  <tr>
    <td>Lâm</td>
    <td>25</td>
  </tr>
</table>

Với cấu trúc trên, bạn có thể áp dụng cho các trường hợp cần làm nổi bật các cột chứa thông tin quan trọng. Trong đó, tag <col> cho phép bạn định dạng cho tất cả các ô của cột, thay vì phải thực hiện trên từng cột riêng lẻ.

Ngoài ra, bạn cũng có thể highlight cho cả 2 cột bằng cách chèn thêm thuộc tính span vào trong <col> với giá trị là số lượng cột chính xác mà bạn muốn highlight. Chi tiết có thể tham khảo qua ví dụ sau: 

<colgroup>
     <col style="background-color: yellow" span="2" />
</colgroup>

Cần lưu ý là các thuộc tính <colspan>, <rowspan> và span trong Table HTML đều chỉ nhận giá trị là một số thay vì văn bản hay một đơn vị bất kỳ. 

Định dạng border

Để bảng trở nên bắt mắt hơn, bạn có thể tạo đường viền với thuộc tính border. Thuộc tính này sẽ được chèn vào trong các tag <table>, <th><td>. Thông qua thuộc tính này, bạn có thể tạo một số kiểu định dạng bảng như: 

  • Border-collapse: Thu gọn thành một đường viền đơn. 
  • Border-radius: Bo tròn đường viền.
  • Border-color: Đổi màu sắc đường viền.
  • Border-style: Thay đổi định dạng cho kiểu đường viền, chẳng hạn như dashed, groove, none, dotted, solid, double, ridge, hidden,… 

Dưới đây là một ví dụ mà bạn có thể tham khảo: 

<style>
th, td {
  border-style:solid;
  border-radius: 10px;
  border-color: #96D4D4;
}
</style>

Sau cú pháp trên, bạn sẽ nhận được kết quả hiển thị trên web như sau:

Ví dụ khi sử dụng định dạng Border
Ví dụ khi sử dụng định dạng Border

Định dạng Cellpadding & Cellspacing

Thông qua thuộc tính Cellpadding, bạn có thể xác định khoảng cách giữa các nội dung trong một ô của bảng và đường viền của ô đó với đơn vị đo lường là pixels. Trong trường hợp bạn muốn tạo khoảng cách giữa các ô, hãy tham khảo các thuộc tính liên quan như: padding-bottom, padding-top, padding-left, padding-right

Dưới đây là một ví dụ điển hình:

table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}
th, td {
  padding-top: 10px;
  padding-bottom: 20px;
  padding-left: 30px;
  padding-right: 40px;
}

Sau đó, bảng sẽ hiển thị trên trang web dưới dạng như sau: 

Ví dụ 1 khi sử dụng định dạng Cellpadding & Cellspacing
Ví dụ 1 khi sử dụng định dạng Cellpadding & Cellspacing

Không chỉ thế, Cellspacing còn cho phép người dùng chỉ định khoảng cách giữa các ô với giá trị mặc định tương tự là pixels. Để thay đổi thông số này, bạn sẽ cần đến thuộc tính border-spacing, cụ thể là: 

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

Kết quả bạn nhận được sẽ như thế này:

Ví dụ 2 khi sử dụng định dạng Cellpadding & Cellspacing
Ví dụ 2 khi sử dụng định dạng Cellpadding & Cellspacing

Định dạng Width và Height

Trong Table HTML, Width và Height là 2 thuộc tính quen thuộc được sử dụng để xác định chiều cao và chiều rộng chính xác của bảng với giá trị được xác định theo pixel hoặc phần trăm, cụ thể là: 

<!DOCTYPE html>
<html>
<body>
    <p>- Bảng bên dưới có chiều rộng bằng 100% chiều rộng phần nội của phần tử body</p>
    <table border="1" width="100%">
        <tr>
            <th>Họ và tên</th>
            <th>Năm sinh</th>
            <th>Giới tính</th>
            <th>Quê quán</th>
        </tr>
        <tr>
            <td>Nguyễn Thành A</td>
            <td>1993</td>
            <td>Nam</td>
            <td>Cần Thơ</td>
        </tr>
        <tr>
            <td>Trần Văn B</td>
            <td>1985</td>
            <td>Nam</td>
            <td>Vĩnh Long</td>
        </tr>
        <tr>
            <td>Lê Thị C</td>
            <td>1990</td>
            <td>Nữ</td>
            <td>Sóc Trăng</td>
        </tr>
    </table>
    <p>- Bảng bên dưới có chiều rộng bằng 500 pixel</p>
    <table border="1" width="500px">
        <tr>
            <th>Họ và tên</th>
            <th>Năm sinh</th>
            <th>Giới tính</th>
            <th>Quê quán</th>
        </tr>
        <tr>
            <td>Nguyễn Thành A</td>
            <td>1993</td>
            <td>Nam</td>
            <td>Cần Thơ</td>
        </tr>
        <tr>
            <td>Trần Văn B</td>
            <td>1985</td>
            <td>Nam</td>
            <td>Vĩnh Long</td>
        </tr>
        <tr>
            <td>Lê Thị C</td>
            <td>1990</td>
            <td>Nữ</td>
            <td>Sóc Trăng</td>
        </tr>
    </table>
</body>
</html>

Dưới đây là kết quả bạn sẽ nhận được sau khi thực hiện cú pháp trên:

Ví dụ khi sử dụng định dạng Width và Height
Ví dụ khi sử dụng định dạng Width và Height

Một số trick hay khi dùng bảng trong HTML

Để tối ưu hóa quá trình tạo bảng với HTML mà vẫn đảm bảo nội dung bên trong được hiển thị một cách trực quan, dễ hiểu và đẹp mắt nhất, bạn có thể tham khảo một số trick hay hữu ích trong nội dung dưới đây: 

Nesting Tables: Được hiểu là việc đặt 1 bảng bên trong một bảng khác. Mặc dù phương pháp này khá phức tạp về markup, nhưng đôi khi chúng sẽ hữu dụng trong việc sắp xếp và trình bày nội dung của bảng một cách khoa học, logic nhất. 

Zebra Striping Tables: Đây là dạng table sọc, thường bao gồm các sọc ghi và sọc trắng xen kẽ nhau. Để tạo bảng tương tự, bạn chỉ cần chỉnh sửa đôi chút trong CSS với cú pháp sau: 

tbody tr:nth-child(odd) {background: #f4f4f4; }

Căn chỉnh Table ra giữa: Tương tự, để căn chỉnh bảng ra giữa, bạn chỉ cần sử dụng CSS: 

margin: auto; 

Hoặc sử dụng Flexbox:

display: flex;
justify-content: center;
align-items: center;

Khi nào nên và không nên sử dụng table HTML

Table HTML sẽ hữu ích trong trường hợp bạn muốn đưa nhiều thông tin vào trong một bảng để chúng hiển thị một cách trực quan, dễ hiểu và đẹp mắt nhất trên trang web. Tuy nhiên, bạn không thể sử dụng Table HTML để làm layout. Thay vào đó, hãy tìm hiểu các phương pháp khác hiệu quả và thông dụng hơn như Flexbox, CSS Grid…

Lời kết

Đó là các bước tạo Table HTML chi tiết mà bạn có thể tham khảo. Nhìn chung, Table HTML sẽ rất hữu ích trong việc truyền tải thông tin một cách trực quan, nhưng hãy cân nhắc khi sử dụng để đạt được hiệu quả cao nhất. Ngoài ra, đừng quên chia sẻ bài viết để mọi người cùng đón đọc, bạn nhé!

THEO DÕI VÀ CẬP NHẬT CHỦ ĐỀ BẠN QUAN TÂM

Đăng ký ngay để nhận những thông tin mới nhất từ blog của chúng tôi. Đừng bỏ lỡ cơ hội truy cập kiến thức và tin tức hàng ngày

Chọn chủ đề :

Kết nối với mình qua

Kết nối với mình qua

Tăng tốc độ website - Nâng tầm giá trị thương hiệu

Tăng tốc tải trang

95 điểm

Nâng cao trải nghiệm người dùng

Tăng 8% tỷ lệ chuyển đổi

Thúc đẩy SEO, Google Ads hiệu quả

Tăng tốc ngay

SẢN PHẨM NỔI BẬT

7 NGÀY DÙNG THỬ HOSTING

NẮM BẮT CƠ HỘI, THÀNH CÔNG DẪN LỐI

Cùng trải nghiệm dịch vụ hosting tốc độ cao được hơn 100,000 khách hàng sử dụng

ĐĂNG KÝ NHẬN TÀI LIỆU THÀNH CÔNG
Cảm ơn bạn đã đăng ký nhận tài liệu mới nhất từ Vietnix!
ĐÓNG

ĐĂNG KÝ DÙNG THỬ HOSTING

7 NGÀY MIỄN PHÍ

ĐĂNG KÝ DÙNG THỬ HOSTING

7 NGÀY MIỄN PHÍ

XÁC NHẬN ĐĂNG KÝ DÙNG THỬ THÀNH CÔNG
Cảm ơn bạn đã đăng ký thông tin thành công. Đội ngũ CSKH sẽ liên hệ trực tiếp để kích hoạt dịch vụ cho bạn nhanh nhất!
ĐÓNG

Chỉ số tăng trưởng

Điểm Desktop

100 (+39)

Điểm Mobile

100 (+67)

Core Web Vitals

Passed

Lĩnh vực

Ecommerce

Chỉ số tăng trưởng

Điểm Desktop

99 (+28)

Điểm Mobile

100 (+50)

Core Web Vitals

Passed

Lĩnh vực

SEO

Chỉ số tăng trưởng

Điểm Desktop

99 (+26)

Điểm Mobile

98 (+59)

Core Web Vitals

Passed

Lĩnh vực

Ecommerce

Chỉ số tăng trưởng

Điểm Desktop

100 (+8)

Điểm Mobile

98 (+35)

Core Web Vitals

Passed

Lĩnh vực

Giáo Dục

Chỉ số tăng trưởng

Điểm Desktop

100 (+61)

Điểm Mobile

100 (+61)

Core Web Vitals

Passed

Lĩnh vực

Giáo Dục

Võ Thiên Tòng

25 Tháng 2 lúc 21:09

·

Mình muốn gửi lời cảm ơn chân thành đến Team Vietnix, anh Hưng Nguyễn, anh Vietnix Trung, em Quốc Huy đã hỗ trợ tối ưu Page Speed Insight (PSI) cho website vanvoiminhhoa.vn của mình.
Biết đến anh Hưng đã lâu nhưng chưa có duyên sử dụng dịch vụ bên anh. Tình cờ thấy được bài Post của anh về việc hỗ trợ tối ưu PSI miễn phí chỉ với vài Slot, thấy AE cmt khá nhiều nên cũng không nghĩ tới lượt mình. Hôm sau đánh liều inbox 1 phen xem sao thì may mắn được đưa vào danh sách. Vài ngày sau được Team Vietnix liên hệ và hỗ trợ.
Kết quả đạt được:
• Điểm xanh lè xanh lét
• Tốc độ tải trang nhanh hơn hẳn
• Các chỉ số cũng được cải thiện đáng kể
• Và mình tin rằng với việc PSI được cải thiện cũng thúc đẩy những thứ khác đi lên theo!
Mình thực sự hài lòng với dịch vụ của Vietnix và muốn giới thiệu đến tất cả mọi người:
• Dịch vụ Wordpress Hosting: Tốc độ nhanh, ổn định, bảo mật cao, hỗ trợ kỹ thuật 24/7. (https://vietnix.vn/wordpress-hosting/)
• Dịch vụ Business Hosting: Dung lượng lớn, phù hợp cho website có lượng truy cập cao, tích hợp nhiều tính năng cao cấp. (https://vietnix.vn/business-hosting/)
Đặc biệt, Vietnix đang có chương trình ưu đãi:
• Giảm giá 20% trọn đời khi nhập code THIENTONG_PAGESPEED tại trang thanh toán (Chu kỳ 12 tháng trở lên)
• Tặng 1 lần tối ưu điểm Page Speed Insight cho 1 website
Cám ơn Vietnix một lần nữa!
#Vietnix #Vanvoiminhhoa #Pagespeedinsight
Trước khi tối ưu
Sau khi tối ưu
Thiện Nguyễn - CEO SEO Dạo

5 Tháng 3 lúc 16:21

·

CORE WEB VITAL YẾU TỐ XẾP HẠNG TÌM KIẾM SEO
Core Web Vitals là một tập hợp các chỉ số đo lường hiệu suất của trang web từ góc độ người dùng, được Google sử dụng để đánh giá trải nghiệm người dùng trên các trang web. Các chỉ số chính bao gồm:
– Largest contentful paint (LCP): Tốc độ render của page. Mục tiêu là dưới 2,5 giây.
– First input delay (FID): Tốc độ phản hồi của website với tương tác của người dùng. Mục tiêu là dưới 100ms.
– Cumulative Layout Shift (CLS): Độ ổn định của bố cục trang. Mục tiêu là dưới 0.1.
Tất cả các chỉ số này đo lường các khía cạnh quan trọng của trải nghiệm người dùng trên trang web. Google đã công bố rằng từ tháng 5 năm 2021, các Core Web Vitals sẽ được sử dụng làm một trong các yếu tố đánh giá trong việc xếp hạng trang web trên kết quả tìm kiếm. Do đó, hiểu và cải thiện các Core Web Vitals là rất quan trọng đối với SEO.
Tóm lại, Core Web Vitals không chỉ giúp cải thiện hiệu suất và xếp hạng trang web trên công cụ tìm kiếm, mà còn cải thiện trải nghiệm của người dùng khi họ truy cập và tương tác với trang website.
P/s: mình đang có gói hỗ trợ đặc biệt cho anh em tối ưu tốc độ bên VIETNIX:
– Giảm 20% lifetime dịch vụ Hosting Business và Hosting Wordpress chu kỳ 12 tháng trở lên.
– Tặng 1 lần tối ưu điểm Page Speed Insight cho 1 website.
Anh em có nhu cầu đăng ký qua bạn Vietnix Trung này nhé và nhập mã SEODAO_PAGESPEED để được ưu đãi nhé.😁
Trước khi tối ưu
Sau khi tối ưu SEO Dạo
Icharm review

5 Tháng 3 lúc 15:43

·

[Mình vừa được hỗ trợ tối ưu page speed website]
Trước khi được tối ưu, web của mình điểm rất thấp, đặc biệt là mobile chỉ có 39. Cơ duyên thế nào lúc lướt face lại va phải chương trình tối ưu pagespeed bên Vietnix.
Sau khi được Trần Hoàng Phúc và team Vietnix hỗ trợ nhiệt tình, điểm web vọt lên 98 99 (như hình bên dưới). Dùng thử web thì thấy quá là mượt, 10 điểm cho team Vietnix.
Nói thật thì mình thật sự ấn tượng về sự nhiệt huyết, tận tâm và rất chuyên nghiệp bên Vietnix.
Anh em có nhu cầu về hosting hay có vấn đề về website như:
1. Web load chậm
2. Khách rời web vì đợi tải nội dung, hình ảnh lâu
3. Hay tất tần tật mọi thứ về website
THÌ LIÊN HỆ NGAY VIETNIX NHÉ!
Và đừng quên dùng pass “ICHARM_PAGESPEED” để được giảm 20% trọn đời hosting business và wp hosting. Quả code này còn được tặng 1 lần tối ưu pagespeed nữa nhé, ưu đãi chắc cũng phải nhất nhì thị trường luôn.
Trước khi tối ưu
Sau khi tối ưu
Hoàng Nguyễn

29 Tháng 2 lúc 17:04

·

Xin chào mọi người! Vừa rồi mình có sử dụng dịch vụ tối ưu website, tăng tốc độ tải trang pagespeed của Vietnix kết quả trên cả tuyệt vời nên mình viết bài này để chia sẻ thông tin với các bạn.
Lý do mình chọn dịch vụ tối ưu tốc độ website của Vietnix:
✅ Đội ngũ chuyên gia giàu kinh nghiệm: Đã tối ưu thành công cho hàng nghìn website trong nhiều lĩnh vực khác nhau. Các bạn nhân viên rất thân thiện, nhiệt tình và chủ động trong quá trình làm việc để cập nhật tiến độ.
✅ Quy trình chuyên nghiệp:
– Kiểm tra và phân tích: Vietnix sử dụng các công cụ tiên tiến để kiểm tra và phân tích tốc độ website của bạn.
– Xác định nguyên nhân: Vietnix xác định nguyên nhân khiến website tải chậm và đưa ra giải pháp tối ưu phù hợp.
– Tối ưu hóa website: Vietnix áp dụng các kỹ thuật tối ưu tiên tiến nhất để tăng tốc độ tải trang.
– Báo cáo kết quả: Vietnix cung cấp báo cáo chi tiết về kết quả tối ưu hóa website.
Công nghệ tiên tiến: Vietnix sử dụng các công nghệ tối ưu mới nhất như LiteSpeed, LSCache, Memcached, Redis, v.v.
✅ Cam kết kết quả: Vietnix cam kết tăng tốc độ website của bạn lên tối thiểu 90%.
✅ Giá cả cạnh tranh: Vietnix cung cấp dịch vụ tối ưu tốc độ website với mức giá cạnh tranh nhất trên thị trường.
📣 Để đăng ký sử dụng dịch vụ tối ưu tốc độ website và các dịch vụ khác như hosting, vps, domain… các bạn có thể đăng ký tại https://portal.vietnix.vn/aff.php?aff=57 hoặc Inbox cho sếp Vietnix Trung nhé.
Các bạn có thể kiểm tra tốc độ trang của mình https://lasan.edu.vn hoặc một vài trang khác đã sử dụng dịch vụ của Vietnix như sau:
https://pagespeed.web.dev/…/https…/v8beqewyt2…
https://pagespeed.web.dev/…/https…/etiohjvtl4…
https://pagespeed.web.dev/…/https…/yczuqpw6d1…
https://pagespeed.web.dev/…/https…/xf9y65kuzk…
https://pagespeed.web.dev/…/https…/fdrsms15en…
https://pagespeed.web.dev/…/https…/s7p9cgzeri…
Trước khi tối ưu
Sau khi tối ưu
Dũng cá xinh

30 Tháng 1 lúc 19:09

·

[Đỉnh]
Em có dùng hosting, vps, cloud vps, cloud server, dedicated server của rất nhiều bên từ trong nước đến nước ngoài để hosting khoảng 2,000+ domain. Mỗi bên đều có ưu nhược khác nhau, nhưng có 1 số bên đặc biệt “bá đạo”, trong đó có: Vietnix!!!!

Lần đầu tiên em được cả CEO Hưng Nguyễn lẫn Master về dev Vietnix Trung của 1 đơn vị hàng đầu liên quan đến Hosting, Server support từ A – Z (từ Zalo, Tele, đến FB và cả Phone)

Em có khá nhiều web dạng Big Data (bài, ảnh, database, data) lên đến hàng trăm Gb. Càng to thì nó càng có nhiều vấn đề về phần phản hồi ban đầu (nhược điểm cố hữu của php wordpress so với nativejs, reactjs, html, headless,…), và anh em Vietnix có nhã ý hỗ trợ xử lý phần Speed Insight này.

Kết quả thực sự kinh ngạc, từ cách trao đổi đến xử lý vấn đề, cut off những cái cần cut off, xử lý rất sâu vấn đề và gợi ý rất nhiều ý tưởng optimize hệ thống!!!! Thực sự quá hài lòng về kết quả cũng như cách tương tác của các đầu tầu bên Vietnix ^^!!!

Nhân cơ duyên được kết nối với những cao thủ của Vietnix, em xin chia sẻ và lan tỏa để nhiều anh em có cơ hội được sử dụng những dịch vụ tốt nhất với giá vô cùng hợp lý!!!!

1 – Với anh em chưa có hosting, em đặc biệt recommend sử dụng hosting bên Vietnix:
– Sử dụng mã DUNGCAXINH_PAGESPEED sẽ được giảm 20% trọn đời (lifetime luôn)
– Áp dụng các gói Hosting Business, Hosting wordpress và reg 1 năm trở lên
– Anh em chưa biết cách reg thì còm men hoặc ib để em hướng dẫn hoặc nhờ các bạn bên Vietnix support từ A – Z

2 – Anh em có hosting rồi và muốn build blog hoặc web = wordpress mà chưa có giao diện thì nhân tiện em đang có tài khoản Premium bên Envato, em sẽ tặng bất kỳ giao diện nào có trên Envato Themes (Link em để dưới còm men) ạ. Cả nhà còm hoặc ib em Themes mà mọi người “chim ưng”, em sẽ cho anh em tải về, up drive và gửi ạ!!! (Chương trình này kéo dài đến ngày 29 tết âm lịch ạ)

3 – BEST NHẤT luôn!!!! Anh em nào mua hosting dùng mã DUNGCAXINH_PAGESPEED sẽ được tối ưu 100 điểm tốc độ cho 1 web (đây là ưu đãi riêng của CEO Hưng Nguyễn dành cho bạn bè của #dungcaxinh ^^) (Giá trị nhất là cái vụ số 3 này anh chị em nhé ^^), cơ hội vàng để move về đơn vị hosting uy tín là đây ^^!!!!

Một lần nữa xin chân thành cám ơn 2 đồng chí em: Hưng Nguyễn và Vietnix Trung đã giải được một bài toán khó cho các trang WP Big data mà anh loay hoay bao lâu nay chưa tìm ra đáp án!!! Chúc Vietnix ngày càng phát triển và có một năm 2024 đại đại thắng nhé ^^ !!!!!
#SEO #Vietnix #dungcaxinh

Trước khi tối ưu
Sau khi tối ưu
Hiếu AI

2 Tháng 2 lúc 21:06

·

UY TÍN – TẬN TÂM – TỐC ĐỘ

3 từ trên là vẫn chưa đủ để nói về quy trình làm việc cực chuyên nghiệp của team Vietnix.Chuyện là mình có con website chính đang có lượt truy cập organic hàng ngày cũng tương đối (hình 1)

Vấn đề là, con site này đang nằm trên hosting dùng chung nên tốc độ load chưa nhanh, tốc độ load chưa nhanh thì trải nghiệm visitor chưa tốt, trải nghiệm visitor chưa tốt thì tỷ lệ chuyển đổi ra đơn hàng kiểu gì thì kiểu cũng sẽ bị ảnh hưởng.

Biết rõ là đang mất tiền nhưng không biết xử lý như lào, nghĩ mà cay.

Đang loay hoay thì vận may nó tới, hôm qua đang lướt phở bò thấy a Nguyễn Việt Dũng đăng bài, rảnh nên thả cái comment hóng hớt, ai ngờ ngoằng phát thấy ông Dũng tạo nhóm với Vietnix Trung luôn.

Ae Vietnix thì siêu tốc độ, lập tức lấy thông tin vào việc, không hỏi han lằng nhằng, không kỳ kèo chốt đơn dù lúc đấy cũng đang đêm muộn.
Sáng hôm sau dậy vẫn còn đang lơ ngơ mở điện thoại check tin nhắn thì đã thấy ae Vietnix báo xong việc, trong khi mình vẫn chưa biết có chuyện gì xảy ra @@.

Được cái bấm thử website thì thấy load siêu nhanh, chưa tới một giây là thông tin các thứ hiện hết. Quá phê, thả con ảnh trước sau (hình 2,3) để ace tiện đối chiếu nhé. Thế này thì mình gửi gắm nốt 15 em website còn lại cho team Vietnix thôi chứ không cần nghĩ ngợi gì nữa. 10/10.

Nên là:

  1. Anh chị em muốn có một con website tốc độ load nhanh như tốc độ trở mặt của nyc – Dùng ngay dịch vụ hosting của Vietnix
  2. Anh chị em có website rồi muốn tìm bên hosting uy tín, chuyên nghiệp hỗ trợ không quản ngày đêm – Liên hệ ngay Vietnix Trung
  3. Anh chị em quan tâm đến trải nghiệm khách hàng, từ những cái nhỏ nhất như tăng tốc độ website – Better call Vietnix Trung

Và đừng quên dùng pass “HIEUAI_PAGESPEED” để được giảm 20% trọn đời hosting business và wp hosting, quả code này còn được tặng 1 lần tối ưu pagespeed nữa nhé, ưu đãi chắc cũng phải nhất nhì thị trường luôn.
#SEO #Vietnix #hieuai

Website
Trước khi tối ưu
Sau khi tối ưu

Chỉ số tăng trưởng

Điểm Desktop

100 (+43)

Điểm Mobile

100 (+74)

Core Web Vitals

Passed

Lĩnh vực

AI