{"id":88834,"date":"2025-07-01T16:51:55","date_gmt":"2025-07-01T09:51:55","guid":{"rendered":"https:\/\/itviec.com\/blog\/?p=88834"},"modified":"2025-07-10T11:34:53","modified_gmt":"2025-07-10T04:34:53","slug":"huong-dan-su-dung-table-bootstrap","status":"publish","type":"post","link":"https:\/\/itviec.com\/blog\/huong-dan-su-dung-table-bootstrap\/","title":{"rendered":"Table Bootstrap: Chi ti\u1ebft c\u00e1ch t\u1ea1o v\u00e0 t\u00f9y ch\u1ec9nh b\u1ea3ng v\u1edbi Bootstrap"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_84 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">N\u1ed9i dung b\u00e0i vi\u1ebft<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/itviec.com\/blog\/huong-dan-su-dung-table-bootstrap\/#Table_trong_Bootstrap_la_gi\" >Table trong Bootstrap l\u00e0 g\u00ec?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/itviec.com\/blog\/huong-dan-su-dung-table-bootstrap\/#Cac_dinh_dang_cua_Table_Bootstrap\" >C\u00e1c \u0111\u1ecbnh d\u1ea1ng c\u1ee7a Table Bootstrap<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/itviec.com\/blog\/huong-dan-su-dung-table-bootstrap\/#Tao_diem_nhan_cho_Table_trong_Bootstrap_Accented_Tables\" >T\u1ea1o \u0111i\u1ec3m nh\u1ea5n cho Table trong Bootstrap (Accented Tables)<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/itviec.com\/blog\/huong-dan-su-dung-table-bootstrap\/#Responsive_Tables_trong_Bootstrap\" >Responsive Tables trong Bootstrap<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/itviec.com\/blog\/huong-dan-su-dung-table-bootstrap\/#Tuy_chinh_Table_Bootstrap\" >T\u00f9y ch\u1ec9nh Table Bootstrap<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/itviec.com\/blog\/huong-dan-su-dung-table-bootstrap\/#Bai_tap_Table_Bootstrap\" >B\u00e0i t\u1eadp Table Bootstrap<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/itviec.com\/blog\/huong-dan-su-dung-table-bootstrap\/#Cau_hoi_thuong_gap_ve_Table_Bootstrap\" >C\u00e2u h\u1ecfi th\u01b0\u1eddng g\u1eb7p v\u1ec1 Table Bootstrap<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/itviec.com\/blog\/huong-dan-su-dung-table-bootstrap\/#Tong_ket\" >T\u1ed5ng k\u1ebft<\/a><\/li><\/ul><\/nav><\/div>\n\n<p><strong><em>Trong qu\u00e1 tr\u00ecnh x\u00e2y d\u1ef1ng giao di\u1ec7n web, b\u1ea3ng (table) l\u00e0 c\u00f4ng c\u1ee5 kh\u00f4ng th\u1ec3 thi\u1ebfu \u0111\u1ec3 tr\u00ecnh b\u00e0y d\u1eef li\u1ec7u m\u1ed9t c\u00e1ch c\u00f3 t\u1ed5 ch\u1ee9c v\u00e0 d\u1ec5 nh\u00ecn. Bootstrap gi\u00fap vi\u1ec7c thi\u1ebft k\u1ebf b\u1ea3ng tr\u1edf n\u00ean nh\u1eb9 nh\u00e0ng h\u01a1n nh\u1edd v\u00e0o c\u00e1c class ti\u1ec7n \u00edch \u0111\u01b0\u1ee3c t\u00edch h\u1ee3p s\u1eb5n.&nbsp;<\/em><\/strong><\/p>\n\n\n\n<p>\u0110\u1ecdc b\u00e0i vi\u1ebft n\u00e0y \u0111\u1ec3 \u0111\u01b0\u1ee3c h\u01b0\u1edbng d\u1eabn:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>C\u00e1ch t\u1ea1o b\u1ea3ng c\u01a1 b\u1ea3n trong Bootstrap<\/li>\n\n\n\n<li>C\u00e1ch \u0111\u1ecbnh d\u1ea1ng b\u1ea3ng: m\u00e0u s\u1eafc, vi\u1ec1n, c\u0103n l\u1ec1, nh\u00f3m d\u1eef li\u1ec7u<\/li>\n\n\n\n<li>C\u00e1c hi\u1ec7u \u1ee9ng gi\u00fap b\u1ea3ng sinh \u0111\u1ed9ng<\/li>\n\n\n\n<li>T\u00f9y ch\u1ec9nh b\u1ea3ng theo \u00fd mu\u1ed1n<\/li>\n\n\n\n<li>B\u00e0i t\u1eadp th\u1ef1c h\u00e0nh v\u00e0 gi\u1ea3i \u0111\u00e1p c\u00e1c c\u00e2u h\u1ecfi th\u01b0\u1eddng g\u1eb7p<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-table-trong-bootstrap-la-gi\"><span class=\"ez-toc-section\" id=\"Table_trong_Bootstrap_la_gi\"><\/span><strong>Table trong Bootstrap l\u00e0 g\u00ec?<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-table-trong-html-la-gi\"><strong>Table trong HTML l\u00e0 g\u00ec?<\/strong><\/h3>\n\n\n\n<p>Table (b\u1ea3ng) l\u00e0 m\u1ed9t c\u1ea5u tr\u00fac HTML d\u00f9ng \u0111\u1ec3 hi\u1ec3n th\u1ecb d\u1eef li\u1ec7u d\u01b0\u1edbi d\u1ea1ng h\u00e0ng v\u00e0 c\u1ed9t, gi\u1ed1ng nh\u01b0 b\u1ea3ng t\u00ednh Excel. M\u1ed7i b\u1ea3ng bao g\u1ed3m c\u00e1c ph\u1ea7n c\u01a1 b\u1ea3n nh\u01b0:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>&lt;table&gt;<\/code>: Th\u1ebb ch\u00ednh \u0111\u1ec3 khai b\u00e1o b\u1ea3ng<\/li>\n\n\n\n<li><code>&lt;tr&gt;<\/code> (table row): \u0110\u1ea1i di\u1ec7n cho m\u1ed9t h\u00e0ng<\/li>\n\n\n\n<li><code>&lt;th&gt;<\/code> (table heading): Ti\u00eau \u0111\u1ec1 c\u1ee7a c\u1ed9t<\/li>\n\n\n\n<li><code>&lt;td&gt;<\/code> (table data): D\u1eef li\u1ec7u trong b\u1ea3ng<\/li>\n<\/ul>\n\n\n\n<p>Table th\u01b0\u1eddng \u0111\u01b0\u1ee3c d\u00f9ng \u0111\u1ec3 hi\u1ec3n th\u1ecb d\u1eef li\u1ec7u c\u00f3 c\u1ea5u tr\u00fac r\u00f5 r\u00e0ng nh\u01b0 danh s\u00e1ch s\u1ea3n ph\u1ea9m, b\u1ea3ng \u0111i\u1ec3m, h\u00f3a \u0111\u01a1n, b\u00e1o c\u00e1o, l\u1ecbch bi\u1ec3u\u2026 ho\u1eb7c t\u1ed5 ch\u1ee9c d\u1eef li\u1ec7u d\u1ea1ng l\u01b0\u1edbi, nh\u1ea5t l\u00e0 trong c\u00e1c dashboard qu\u1ea3n tr\u1ecb, h\u1ec7 th\u1ed1ng qu\u1ea3n l\u00fd (CMS, CRM\u2026).<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p><em>\u0110\u1ecdc chi ti\u1ebft v\u1ec1 <strong>H\u01b0\u1edbng d\u1eabn c\u00e1ch t\u1ea1o v\u00e0 t\u00f9y ch\u1ec9nh <a href=\"https:\/\/itviec.com\/blog\/table-html\/\" target=\"_blank\" rel=\"noreferrer noopener\">Table HTML<\/a><\/strong><\/em><\/p>\n<\/blockquote>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-table-bootstrap-la-gi\"><strong>Table Bootstrap l\u00e0 g\u00ec?<\/strong><\/h3>\n\n\n\n<p>Trong Bootstrap, vi\u1ec7c t\u1ea1o b\u1ea3ng (table) tr\u1edf n\u00ean d\u1ec5 d\u00e0ng v\u00e0 \u0111\u1eb9p m\u1eaft ch\u1ec9 v\u1edbi m\u1ed9t v\u00e0i class \u0111\u01a1n gi\u1ea3n. C\u00e1c b\u1ea3ng \u0111\u01b0\u1ee3c h\u1ed7 tr\u1ee3 m\u1eb7c \u0111\u1ecbnh v\u1edbi giao di\u1ec7n g\u1ecdn g\u00e0ng, r\u00f5 r\u00e0ng, d\u1ec5 \u0111\u1ecdc, v\u00e0 b\u1ea1n c\u00f3 th\u1ec3 m\u1edf r\u1ed9ng ho\u1eb7c t\u00f9y ch\u1ec9nh th\u00eam theo nhu c\u1ea7u.<\/p>\n\n\n\n<p>B\u1ea1n ch\u1ec9 c\u1ea7n th\u00eam class <strong><code>.table<\/code><\/strong> v\u00e0o th\u1ebb <code>&lt;table&gt;<\/code> \u0111\u1ec3 \u00e1p d\u1ee5ng style m\u1eb7c \u0111\u1ecbnh c\u1ee7a Bootstrap. Ngo\u00e0i ra c\u00f2n c\u00f3 h\u00e0ng lo\u1ea1t class h\u1ed7 tr\u1ee3 kh\u00e1c \u0111\u1ec3 thay \u0111\u1ed5i m\u00e0u s\u1eafc, vi\u1ec1n, k\u00edch th\u01b0\u1edbc, canh l\u1ec1 v\u00e0 hi\u1ec7u \u1ee9ng t\u01b0\u01a1ng t\u00e1c.<\/p>\n\n\n\n<p>V\u00ed d\u1ee5 v\u1ec1 vi\u1ec7c t\u1ea1o m\u1ed9t b\u1ea3ng \u0111\u01a1n gi\u1ea3n, s\u1eed d\u1ee5ng class <code>.table<\/code> \u0111\u1ec3 c\u00f3 \u0111\u1ecbnh d\u1ea1ng m\u1eb7c \u0111\u1ecbnh trong Bootstrap:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;table class=\"table\"&gt;\n\n&nbsp;&nbsp;&nbsp;&lt;thead&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;tr&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;th scope=\"col\"&gt;#&lt;\/th&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;th scope=\"col\"&gt;First&lt;\/th&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;th scope=\"col\"&gt;Last&lt;\/th&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/tr&gt;\n&nbsp;&nbsp;&nbsp;&lt;\/thead&gt;\n\n&nbsp;&nbsp;&nbsp;&lt;tbody&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;tr&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;th scope=\"row\"&gt;1&lt;\/th&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;Mark&lt;\/td&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;Otto&lt;\/td&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/tr&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;tr&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;th scope=\"row\"&gt;2&lt;\/th&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;Jacob&lt;\/td&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;Thornton&lt;\/td&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/tr&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;tr&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;th scope=\"row\"&gt;3&lt;\/th&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;John&lt;\/td&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;Doe&lt;\/td&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/tr&gt;\n&nbsp;&nbsp;&nbsp;&lt;\/tbody&gt;\n\n&nbsp;&lt;\/table&gt;<\/code><\/pre>\n\n\n\n<p>K\u1ebft qu\u1ea3:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXfPriE5LCPsAd6AdAEu9uhEguaVCwSLCvUp1KojGZQQWoVvg6y_UY7-xkQxoZTdy3lY6Yaro9AsSf-_6WhBab95UrNoxXFyL8vUIjh0REikY9txODx0u13C-5EA8gXnJgpzVs3HGg?key=bU5nUsG1WgvsZNscy82J6Q\" alt=\"\"\/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-cac-d\u1ecbnh-d\u1ea1ng-c\u1ee7a-table-bootstrap\"><span class=\"ez-toc-section\" id=\"Cac_dinh_dang_cua_Table_Bootstrap\"><\/span><strong>C\u00e1c \u0111\u1ecbnh d\u1ea1ng c\u1ee7a Table Bootstrap<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-cac-bi\u1ebfn-th\u1ec3-c\u1ee7a-b\u1ea3ng-variants\"><strong>C\u00e1c bi\u1ebfn th\u1ec3 c\u1ee7a b\u1ea3ng (Variants)<\/strong><\/h3>\n\n\n\n<p>Bootstrap h\u1ed7 tr\u1ee3 nhi\u1ec1u bi\u1ebfn th\u1ec3 m\u00e0u s\u1eafc cho b\u1ea3ng th\u00f4ng qua vi\u1ec7c k\u1ebft h\u1ee3p c\u00e1c theme theo c\u00fa ph\u00e1p chung <strong><code>.table-*<\/code><\/strong>, gi\u00fap b\u1ea1n thay \u0111\u1ed5i <strong>m\u00e0u n\u1ec1n (background)<\/strong> c\u1ee7a to\u00e0n b\u1ed9 h\u00e0ng ho\u1eb7c \u00f4 trong b\u1ea3ng.<\/p>\n\n\n\n<p>M\u1ee5c \u0111\u00edch l\u00e0 \u0111\u1ec3 ph\u00e2n lo\u1ea1i, nh\u1ea5n m\u1ea1nh, ho\u1eb7c bi\u1ec3u th\u1ecb tr\u1ea1ng th\u00e1i d\u1eef li\u1ec7u trong b\u1ea3ng (v\u00ed d\u1ee5: th\u00e0nh c\u00f4ng, l\u1ed7i, c\u1ea3nh b\u00e1o\u2026).<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXfrzr2rqveqfX3rxFOLrWhzp0n8STpQfwodCljWKvLhbxeD0XFYD1Y0zLiGizTIj7piKQMMSE1d50dlwRJ3nwTnswO8BDDiz-IUZJOuARj1ZT8nSgcipBRAJ53hTyYiVMrKGmkX?key=bU5nUsG1WgvsZNscy82J6Q\" alt=\"\"\/><\/figure>\n\n\n\n<p><strong>V\u00ed d\u1ee5 1: <\/strong>T\u1ea1o m\u1ed9t b\u1ea3ng theo ch\u1ee7 \u0111\u1ec1 <strong>success <\/strong>(\u00e1p d\u1ee5ng cho to\u00e0n b\u1ea3ng):<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;table class=\"table table-success\"&gt;\n\n&nbsp;&nbsp;&nbsp;&lt;thead&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;tr&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;th&gt;H\u1ecd t\u00ean&lt;\/th&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;th&gt;Tr\u1ea1ng th\u00e1i&lt;\/th&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/tr&gt;\n&nbsp;&nbsp;&nbsp;&lt;\/thead&gt;\n\n&nbsp;&nbsp;&nbsp;&lt;tbody&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;tr&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;Minh Anh&lt;\/td&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;\u0110\u00e3 x\u00e1c nh\u1eadn&lt;\/td&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/tr&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;tr&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;H\u1ea3i \u0110\u0103ng&lt;\/td&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;\u0110\u00e3 x\u00e1c nh\u1eadn&lt;\/td&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/tr&gt;\n&nbsp;&nbsp;&nbsp;&lt;\/tbody&gt;\n\n&nbsp;&lt;\/table&gt;<\/code><\/pre>\n\n\n\n<p>Trong \u0111\u00f3, s\u1eed d\u1ee5ng class <strong><code>.table<\/code><\/strong> \u0111\u1ec3 \u00e1p d\u1ee5ng \u0111\u1ecbnh d\u1ea1ng cho table trong Bootstrap v\u00e0 <strong><code>.table-success<\/code> <\/strong>\u0111\u1ec3 \u00e1p d\u1ee5ng m\u00e0u s\u1eafc theo ch\u1ee7 \u0111\u1ec1 success (m\u00e0u xanh l\u00e1) cho to\u00e0n b\u1ed9 b\u1ea3ng.<\/p>\n\n\n\n<p>K\u1ebft qu\u1ea3:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXcu4paKmNEmipM-c8cgB0Xo7_lqP1OL1DAVKnZxeYByccAdZoQYUqtavBHV-EU4DJ0P1kaXZNHKo8P_t7jWf5H5qXw7XLT-L6MtA_aEyEUWT-jxzEKv-qr88bhY34GYbh1vlutu5Q?key=bU5nUsG1WgvsZNscy82J6Q\" alt=\"\"\/><\/figure>\n\n\n\n<p><strong>V\u00ed d\u1ee5 2: <\/strong>\u00c1p d\u1ee5ng ch\u1ee7 \u0111\u1ec1 cho t\u1eebng h\u00e0ng:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;table class=\"table\"&gt;\n\n&nbsp;&nbsp;&nbsp;&lt;thead&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;tr&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;th&gt;STT&lt;\/th&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;th&gt;S\u1ea3n ph\u1ea9m&lt;\/th&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;th&gt;Tr\u1ea1ng th\u00e1i&lt;\/th&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/tr&gt;\n&nbsp;&nbsp;&nbsp;&lt;\/thead&gt;\n\n&nbsp;&nbsp;&nbsp;&lt;tbody&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;tr class=\"table-success\"&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;1&lt;\/td&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;\u00c1o thun&lt;\/td&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;C\u00f2n h\u00e0ng&lt;\/td&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/tr&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;tr class=\"table-warning\"&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;2&lt;\/td&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;Gi\u00e0y sneaker&lt;\/td&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;S\u1eafp h\u1ebft&lt;\/td&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/tr&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;tr class=\"table-danger\"&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;3&lt;\/td&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;Qu\u1ea7n jeans&lt;\/td&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;H\u1ebft h\u00e0ng&lt;\/td&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/tr&gt;\n&nbsp;&nbsp;&nbsp;&lt;\/tbody&gt;\n\n&nbsp;&lt;\/table&gt;<\/code><\/pre>\n\n\n\n<p>B\u1ea1n c\u00f3 th\u1ec3 \u00e1p d\u1ee5ng t\u1eebng class theo ch\u1ee7 \u0111\u1ec1 ri\u00eang cho t\u1eebng h\u00e0ng trong b\u1ea3ng b\u1eb1ng c\u00e1ch s\u1eed d\u1ee5ng class <strong>.<code>table-*<\/code><\/strong> v\u00e0o t\u1eebng th\u1ebb <strong><code>&lt;tr&gt;<\/code><\/strong>.<\/p>\n\n\n\n<p>K\u1ebft qu\u1ea3:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXfRStjKbF8cKHyJlycuNtQDfQTRl5zgNu4Dx0uLsM2OBoR7R3YdGxJMAhE_YKiyk5U42n0JsZlcpRfB3IkNp0-jq5NrwfomPwBnNQ4YONnUjN_c-xNWt88YQ7UHmtZ4tCZZ3lGBgg?key=bU5nUsG1WgvsZNscy82J6Q\" alt=\"\"\/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-table-borders\"><strong>Table borders<\/strong><\/h3>\n\n\n\n<p>Trong m\u1ed9t s\u1ed1 tr\u01b0\u1eddng h\u1ee3p, b\u1ea1n s\u1ebd mu\u1ed1n b\u1ea3ng c\u00f3 c\u00e1c \u0111\u01b0\u1eddng vi\u1ec1n r\u00f5 r\u00e0ng \u0111\u1ec3 ph\u00e2n t\u00e1ch d\u1eef li\u1ec7u ho\u1eb7c l\u00e0m cho n\u1ed9i dung d\u1ec5 \u0111\u1ecdc h\u01a1n. Bootstrap cung c\u1ea5p m\u1ed9t s\u1ed1 class ti\u1ec7n d\u1ee5ng \u0111\u1ec3 th\u00eam ho\u1eb7c lo\u1ea1i b\u1ecf \u0111\u01b0\u1eddng vi\u1ec1n trong b\u1ea3ng.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p><em>\u0110\u1ecdc th\u00eam: <strong><a href=\"https:\/\/itviec.com\/blog\/border-bootstrap-la-gi\/\" target=\"_blank\" rel=\"noreferrer noopener\">Border Bootstrap l\u00e0 g\u00ec? 10+ c\u00e1ch thi\u1ebft k\u1ebf vi\u1ec1n \u0111\u1eb9p v\u1edbi Bootstrap<\/a><\/strong><\/em><\/p>\n<\/blockquote>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"h-them-d\u01b0\u1eddng-vi\u1ec1n-v\u1edbi-table-bordered\"><strong>Th\u00eam \u0111\u01b0\u1eddng vi\u1ec1n v\u1edbi .table-bordered<\/strong><\/h4>\n\n\n\n<p>M\u1eb7c \u0111\u1ecbnh, Bootstrap ch\u1ec9 th\u00eam \u0111\u01b0\u1eddng vi\u1ec1n ng\u0103n c\u00e1ch c\u00e1c h\u00e0ng trong b\u1ea3ng, \u0111\u1ec3 th\u00eam vi\u1ec1n xung quanh to\u00e0n b\u1ed9 b\u1ea3ng v\u00e0 c\u00e1c \u00f4 b\u00ean trong, b\u1ea1n c\u00f3 th\u1ec3 s\u1eed d\u1ee5ng class<strong> <code>.table-bordered<\/code><\/strong> v\u00e0o th\u1ebb <strong><code>&lt;table&gt;<\/code><\/strong>.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;table class=\"table table-bordered\"&gt;\n\n&nbsp;&nbsp;&nbsp;&lt;thead&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;tr&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;th&gt;#&lt;\/th&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;th&gt;H\u1ecd&lt;\/th&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;th&gt;T\u00ean&lt;\/th&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/tr&gt;\n&nbsp;&nbsp;&nbsp;&lt;\/thead&gt;\n\n&nbsp;&nbsp;&nbsp;&lt;tbody&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;tr&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;1&lt;\/td&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;Mark&lt;\/td&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;Otto&lt;\/td&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/tr&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;tr&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;2&lt;\/td&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;Jacob&lt;\/td&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;Thornton&lt;\/td&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/tr&gt;\n&nbsp;&nbsp;&nbsp;&lt;\/tbody&gt;\n\n&nbsp;&lt;\/table&gt;<\/code><\/pre>\n\n\n\n<p>K\u1ebft qu\u1ea3:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXcK-NGVYBusZZXQEQtHJvq7uzhP6f5-lzuFDC2mkmuOrJ03AdiAueMafJUaTwwq-P71rpQPTBbr7xDe2fz187N6h2kmSSfcAjINBqyE9Bx3DAU_fRKoDyjv4n2MH6zroZXWVmziFw?key=bU5nUsG1WgvsZNscy82J6Q\" alt=\"\"\/><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"h-tuy-ch\u1ec9nh-mau-vi\u1ec1n-b\u1eb1ng-border\"><strong>T\u00f9y ch\u1ec9nh m\u00e0u vi\u1ec1n b\u1eb1ng .border-*<\/strong><\/h4>\n\n\n\n<p>\u0110\u1ec3 thay \u0111\u1ed5i m\u00e0u s\u1eafc c\u1ee7a \u0111\u01b0\u1eddng vi\u1ec1n Table, b\u1ea1n c\u00f3 th\u1ec3 s\u1eed d\u1ee5ng c\u00e1c class \u0111\u1ecbnh d\u1ea1ng border trong Bootstrap theo c\u00fa ph\u00e1p <strong><code>.border-*<\/code><\/strong>.<\/p>\n\n\n\n<p>V\u00ed d\u1ee5 v\u1ec1 t\u1ea1o \u0111\u01b0\u1eddng vi\u1ec1n m\u00e0u xanh cho table:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;table class=\"table table-bordered border-primary\"&gt;\n\n&nbsp;&nbsp;&nbsp;&lt;thead&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;tr&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;th&gt;#&lt;\/th&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;th&gt;H\u1ecd&lt;\/th&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;th&gt;T\u00ean&lt;\/th&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/tr&gt;\n&nbsp;&nbsp;&nbsp;&lt;\/thead&gt;\n\n&nbsp;&nbsp;&nbsp;&lt;tbody&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;tr&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;1&lt;\/td&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;Mark&lt;\/td&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;Otto&lt;\/td&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/tr&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;tr&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;2&lt;\/td&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;Jacob&lt;\/td&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;Thornton&lt;\/td&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/tr&gt;\n&nbsp;&nbsp;&nbsp;&lt;\/tbody&gt;\n\n&nbsp;&lt;\/table&gt;<\/code><\/pre>\n\n\n\n<p>K\u1ebft qu\u1ea3:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXeIjQCdm7g8HuSu_81c1el-nT46aenTrLLKyUPVOUD7YouVovPZ2JDJ8PlqtW9bMKV9recVyOgQomddQHl3FpWBAgZVmVjqqGf3LfX9srr7GHTIOTHEX-8s7mR425InBCumzBGBgg?key=bU5nUsG1WgvsZNscy82J6Q\" alt=\"\"\/><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"h-lo\u1ea1i-b\u1ecf-vi\u1ec1n-b\u1eb1ng-table-borderless\"><strong>Lo\u1ea1i b\u1ecf vi\u1ec1n b\u1eb1ng .table-borderless<\/strong><\/h4>\n\n\n\n<p>Trong tr\u01b0\u1eddng h\u1ee3p b\u1ea1n mu\u1ed1n t\u1ea1o m\u1ed9t Table t\u1ed1i gi\u1ea3n, mu\u1ed1n lo\u1ea1i b\u1ecf c\u00e1c \u0111\u01b0\u1eddng vi\u1ec1n, b\u1ea1n c\u00f3 th\u1ec3 s\u1eed d\u1ee5ng class <strong><code>.table-borderless<\/code><\/strong>. Ngo\u00e0i ra b\u1ea1n c\u00f3 th\u1ec3 k\u1ebft h\u1ee3p v\u1edbi Table variant \u0111\u1ec3 t\u1ea1o m\u1ed9t table hi\u1ec7n \u0111\u1ea1i.<\/p>\n\n\n\n<p>V\u00ed d\u1ee5:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;table class=\"table table-borderless\"&gt;\n\n&nbsp;&nbsp;&nbsp;&lt;thead&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;tr&nbsp; class=\"table-secondary\"&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;th&gt;#&lt;\/th&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;th&gt;H\u1ecd&lt;\/th&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;th&gt;T\u00ean&lt;\/th&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/tr&gt;\n&nbsp;&nbsp;&nbsp;&lt;\/thead&gt;\n\n&nbsp;&nbsp;&nbsp;&lt;tbody&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;tr&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;1&lt;\/td&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;Mark&lt;\/td&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;Otto&lt;\/td&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/tr&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;tr&nbsp; class=\"table-secondary\"&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;2&lt;\/td&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;Jacob&lt;\/td&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;Thornton&lt;\/td&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/tr&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;tr&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;3&lt;\/td&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;Jasper&lt;\/td&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;Tom&lt;\/td&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/tr&gt;\n&nbsp;&nbsp;&nbsp;&lt;\/tbody&gt;\n\n&nbsp;&lt;\/table&gt;<\/code><\/pre>\n\n\n\n<p>Trong \u0111\u00f3, s\u1eed d\u1ee5ng <strong><code>.table-borderless<\/code><\/strong> \u0111\u1ec3 lo\u1ea1i b\u1ecf \u0111\u01b0\u1eddng vi\u1ec1n, s\u1eed d\u1ee5ng <strong><code>.table-secondary<\/code><\/strong> \u0111\u1ec3 t\u1ea1o h\u00e0ng m\u00e0u x\u00e1m xen k\u1ebd, t\u1ea1o c\u1ea3m gi\u00e1c t\u1ed1i gi\u1ea3n, hi\u1ec7n \u0111\u1ea1i.<\/p>\n\n\n\n<p>K\u1ebft qu\u1ea3:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXf1v-8EOEmI92bSOnbGvGqSXKZdya1oUcqhPPi0P6kbjdvwaaPnh8xOxKByEPXEICi2GpU_X4JpjxpqK35R6c4iXOImYHXsuNgLtedn3xuMXwHLCWCEqB0eGT4hX36pyC4x9yShAA?key=bU5nUsG1WgvsZNscy82J6Q\" alt=\"\"\/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-tuy-ch\u1ec9nh-kich-th\u01b0\u1edbc-b\u1ea3ng\"><strong>T\u00f9y ch\u1ec9nh k\u00edch th\u01b0\u1edbc b\u1ea3ng<\/strong><\/h3>\n\n\n\n<p>Bootstrap c\u00f3 cung c\u1ea5p class <strong><code>.table-sm<\/code><\/strong> \u0111\u1ec3 gi\u1ea3m padding (kho\u1ea3ng \u0111\u1ec7m) gi\u1eefa n\u1ed9i dung v\u00e0 vi\u1ec1n \u00f4, l\u00e0m cho b\u1ea3ng tr\u00f4ng nh\u1ecf g\u1ecdn h\u01a1n, th\u00edch h\u1ee3p cho b\u1ea3ng nhi\u1ec1u d\u00f2ng ho\u1eb7c c\u1ea7n hi\u1ec3n th\u1ecb d\u1eef li\u1ec7u d\u00e0y \u0111\u1eb7c.<\/p>\n\n\n\n<p>V\u00ed d\u1ee5:<\/p>\n\n\n\n<p>\u0110\u00e2y l\u00e0 h\u00ecnh \u1ea3nh m\u1ed9t Table Bootstrap m\u1eb7c \u0111\u1ecbnh:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXcz9sbMdEn7CeAlfyKjlqC66vjJh_XFV_qrkqbNc4QDBO0fYdsBHeZ-xMug3AIm9fuPPha8Pkr99pXjNLYSbTUHmR9muo9gRgtM7kFQOcoNx3pZEYBkHQ9pL4Xdtog9Cm56fGCV4A?key=bU5nUsG1WgvsZNscy82J6Q\" alt=\"\"\/><\/figure>\n\n\n\n<p>C\u00f2n \u0111\u00e2y l\u00e0 Table Bootstrap s\u1eed d\u1ee5ng <code>.table-sm<\/code> \u0111\u1ec3 gi\u1ea3m k\u00edch th\u01b0\u1edbc:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXfb_9Z2QX3uvU-xHL0T6M0SPjkpqZRoQu78JU0XRQBZIiurEk9p7x48awa9hduH3jwyHpie0R2JuYPtzEw1kL3UgqD7B6kBPNECDLlRhfbTr68Vj4F1YOO7xHaJKBD_yJyt5zAfkw?key=bU5nUsG1WgvsZNscy82J6Q\" alt=\"\"\/><\/figure>\n\n\n\n<p>Code:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;table class=\"table table-sm table-bordered\"&gt;\n\n&nbsp;&nbsp;&nbsp;&lt;thead&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;tr&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;th&gt;#&lt;\/th&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;th&gt;H\u1ecd&lt;\/th&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;th&gt;T\u00ean&lt;\/th&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/tr&gt;\n&nbsp;&nbsp;&nbsp;&lt;\/thead&gt;\n\n&nbsp;&nbsp;&nbsp;&lt;tbody&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;tr&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;1&lt;\/td&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;Mark&lt;\/td&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;Otto&lt;\/td&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/tr&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;tr&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;2&lt;\/td&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;Jacob&lt;\/td&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;Thornton&lt;\/td&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/tr&gt;\n&nbsp;&nbsp;&nbsp;&lt;\/tbody&gt;\n\n&nbsp;&lt;\/table&gt;<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-phan-nhom-b\u1ea3ng\"><strong>Ph\u00e2n nh\u00f3m b\u1ea3ng<\/strong><\/h3>\n\n\n\n<p>Khi l\u00e0m vi\u1ec7c v\u1edbi b\u1ea3ng ch\u1ee9a nhi\u1ec1u d\u1eef li\u1ec7u, vi\u1ec7c ph\u00e2n nh\u00f3m r\u00f5 r\u00e0ng gi\u1eefa ph\u1ea7n ti\u00eau \u0111\u1ec1, ph\u1ea7n n\u1ed9i dung v\u00e0 ph\u1ea7n t\u1ed5ng k\u1ebft l\u00e0 r\u1ea5t quan tr\u1ecdng \u0111\u1ec3 gi\u00fap ng\u01b0\u1eddi d\u00f9ng d\u1ec5 \u0111\u1ecdc, d\u1ec5 theo d\u00f5i. Bootstrap h\u1ed7 tr\u1ee3 c\u00e1c th\u1ebb HTML ph\u00e2n nh\u00f3m chu\u1ea9n nh\u01b0:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>&lt;thead&gt;<\/code>: ph\u1ea7n ti\u00eau \u0111\u1ec1 c\u1ed9t<\/li>\n\n\n\n<li><code>&lt;tbody&gt;<\/code>: ph\u1ea7n n\u1ed9i dung d\u1eef li\u1ec7u<\/li>\n\n\n\n<li><code>&lt;tfoot&gt;<\/code>: ph\u1ea7n t\u1ed5ng k\u1ebft (n\u1ebfu c\u00f3)<\/li>\n<\/ul>\n\n\n\n<p>Bootstrap cung c\u1ea5p l\u1edbp <strong><code>.table-group-divider<\/code> <\/strong>\u0111\u1ec3 l\u00e0m n\u1ed5i b\u1eadt ranh gi\u1edbi gi\u1eefa c\u00e1c nh\u00f3m b\u1eb1ng vi\u1ec7c t\u1ea1o \u0111\u01b0\u1eddng vi\u1ec1n d\u00e0y h\u01a1n, \u0111\u1eadm h\u01a1n. V\u00ed d\u1ee5 \u0111\u1ec3 ph\u00e2n t\u00edch gi\u1eefa qu\u1ea3n tr\u1ecb vi\u00ean v\u00e0 ng\u01b0\u1eddi d\u00f9ng trong 1 b\u1ea3ng:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;table class=\"table\"&gt;\n\n&nbsp;&nbsp;&nbsp;&lt;thead&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;tr&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;th&gt;#&lt;\/th&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;th&gt;T\u00ean&lt;\/th&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;th&gt;Vai tr\u00f2&lt;\/th&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/tr&gt;\n&nbsp;&nbsp;&nbsp;&lt;\/thead&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&lt;tbody&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;tr&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;1&lt;\/td&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;Admin 1&lt;\/td&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;Qu\u1ea3n tr\u1ecb vi\u00ean&lt;\/td&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/tr&gt;\n&nbsp;&nbsp;&nbsp;&lt;\/tbody&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&lt;tbody class=\"table-group-divider\"&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;tr&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;2&lt;\/td&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;User A&lt;\/td&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;Ng\u01b0\u1eddi d\u00f9ng&lt;\/td&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/tr&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;tr&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;3&lt;\/td&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;User B&lt;\/td&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;Ng\u01b0\u1eddi d\u00f9ng&lt;\/td&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/tr&gt;\n&nbsp;&nbsp;&nbsp;&lt;\/tbody&gt;\n\n&nbsp;&lt;\/table&gt;<\/code><\/pre>\n\n\n\n<p>K\u1ebft qu\u1ea3:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXenvwYxp2UQNe88uTRQHFhL3yhCIp2DOb7XZXY1lYf3F-zCbXwDSB1Z4njfEbAXt-Fhghy8S1bH8tRa3MvgfDvwbVTsRLuiN46Hl6iiv9zT9KQQB4tx7MVs6OtWFpQaYNmyRgzyTA?key=bU5nUsG1WgvsZNscy82J6Q\" alt=\"\"\/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-canh-ch\u1ec9nh-l\u1ec1-cho-b\u1ea3ng\"><strong>Canh ch\u1ec9nh l\u1ec1 cho b\u1ea3ng<\/strong><\/h3>\n\n\n\n<p>Trong c\u00e1c b\u1ea3ng HTML th\u00f4ng th\u01b0\u1eddng, vi\u1ec7c canh ch\u1ec9nh n\u1ed9i dung theo chi\u1ec1u d\u1ecdc \u0111\u00f4i khi kh\u00f4ng nh\u1ea5t qu\u00e1n v\u00e0 g\u00e2y kh\u00f3 ch\u1ecbu cho ng\u01b0\u1eddi d\u00f9ng khi hi\u1ec3n th\u1ecb d\u1eef li\u1ec7u kh\u00f4ng \u0111\u1ed3ng \u0111\u1ec1u. Bootstrap gi\u00fap b\u1ea1n ki\u1ec3m so\u00e1t t\u1ed1t h\u01a1n vi\u1ec7c c\u0103n ch\u1ec9nh n\u1ed9i dung trong \u00f4 th\u00f4ng qua c\u00e1c class ti\u1ec7n d\u1ee5ng.<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><tbody><tr><td><strong>Class<\/strong><\/td><td><strong>\u00dd ngh\u0129a<\/strong><\/td><\/tr><tr><td><strong>.align-top<\/strong><\/td><td>C\u0103n n\u1ed9i dung l\u00ean tr\u00ean c\u00f9ng<\/td><\/tr><tr><td><strong>.align-middle<\/strong><\/td><td>C\u0103n gi\u1eefa n\u1ed9i dung theo chi\u1ec1u d\u1ecdc<\/td><\/tr><tr><td><strong>.align-bottom<\/strong><\/td><td>C\u0103n n\u1ed9i dung xu\u1ed1ng d\u01b0\u1edbi c\u00f9ng<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p>V\u00ed d\u1ee5, \u0111\u1ec3 canh d\u01b0\u1edbi cho n\u1ed9i dung ti\u00eau \u0111\u1ec1, v\u00e0 canh gi\u1eefa cho d\u00f2ng 1, canh top cho d\u00f2ng 2 ta l\u00e0m nh\u01b0 sau:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;table class=\"table\"&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;thead&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;tr class=\"align-bottom\" style=\"height: 100px;\"&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;th&gt;V\u1ecb tr\u00ed&lt;\/th&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;th&gt;M\u00f4 t\u1ea3&lt;\/th&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/tr&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/thead&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;tbody&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;tr class=\"align-middle\" style=\"height: 100px;\"&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;C\u0103n gi\u1eefa (Middle)&lt;\/td&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;N\u1ed9i dung \u0111\u01b0\u1ee3c c\u0103n gi\u1eefa theo chi\u1ec1u d\u1ecdc.&lt;\/td&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/tr&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;tr class=\"align-top\" style=\"height: 100px;\"&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;C\u0103n Tr\u00ean (Top)&lt;\/td&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;N\u1ed9i dung \u0111\u01b0\u1ee3c canh s\u00e1t c\u1ea1nh tr\u00ean \u00f4.&lt;\/td&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/tr&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/tbody&gt;\n\n&nbsp;&nbsp;&nbsp;&lt;\/table&gt;<\/code><\/pre>\n\n\n\n<p>K\u1ebft qu\u1ea3:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXcNOiYAP1agmLu7ZwL6zedDZ46NbczqCwGk99DUpg51OxVn-Lhgc1T1xGPRW0174X0wrxO23hdr2uS5BCMxcRi5zm5I1IRuw_95N7UnxD3rVczPfeDAPoBeoy00gid4Qdkr9bRL?key=bU5nUsG1WgvsZNscy82J6Q\" alt=\"\"\/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-t\u1ea1o-di\u1ec3m-nh\u1ea5n-cho-table-trong-bootstrap-accented-tables\"><span class=\"ez-toc-section\" id=\"Tao_diem_nhan_cho_Table_trong_Bootstrap_Accented_Tables\"><\/span><strong>T\u1ea1o \u0111i\u1ec3m nh\u1ea5n cho Table trong Bootstrap (Accented Tables)<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-striped-tables\"><strong>Striped tables<\/strong><\/h3>\n\n\n\n<p>V\u00ed d\u1ee5 tr\u01b0\u1eddng h\u1ee3p b\u1ea1n mu\u1ed1n t\u1ea1o m\u00e0u xen k\u1ebd gi\u1eefa c\u00e1c h\u00e0ng ho\u1eb7c c\u00e1c c\u1ed9t trong b\u1ea3ng \u0111\u1ec3 n\u1ed9i dung b\u1ea3ng trong d\u1ec5 nh\u00ecn h\u01a1n, thay v\u00ec \u00e1p d\u1ee5ng class m\u00e0u s\u1eafc cho t\u1eebng h\u00e0ng\/c\u1ed9t, b\u1ea1n c\u00f3 th\u1ec3 s\u1eed d\u1ee5ng c\u00e1c class \u0111\u1ecbnh d\u1ea1ng striped table c\u1ee7a Bootstrap.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"h-striped-rows-s\u1ecdc-xen-k\u1ebd-hang\"><strong>Striped rows: S\u1ecdc xen k\u1ebd h\u00e0ng<\/strong><\/h4>\n\n\n\n<p>Class <strong><code>.table-striped<\/code> <\/strong>\u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng \u0111\u1ec3 t\u1ef1 \u0111\u1ed9ng t\u1ea1o m\u00e0u n\u1ec1n x\u00e1m cho c\u00e1c h\u00e0ng \u1edf v\u1ecb tr\u00ed l\u1ebb \u0111\u1ec3 t\u1ea1o hi\u1ec7u \u1ee9ng s\u1ecdc xen k\u1ebd (ch\u1ec9 t\u00ednh c\u00e1c h\u00e0ng n\u1eb1m trong <code>&lt;tbody&gt;)<\/code>. V\u00ed d\u1ee5:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;table class=\"table table-striped\"&gt;\n\n&nbsp;&nbsp;&nbsp;&lt;thead&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;tr&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;th&gt;#&lt;\/th&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;th&gt;H\u1ecd&lt;\/th&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;th&gt;T\u00ean&lt;\/th&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/tr&gt;\n&nbsp;&nbsp;&nbsp;&lt;\/thead&gt;\n\n&nbsp;&nbsp;&nbsp;&lt;tbody&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;tr&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;1&lt;\/td&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;Mark&lt;\/td&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;Otto&lt;\/td&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/tr&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;tr&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;2&lt;\/td&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;Jacob&lt;\/td&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;Thornton&lt;\/td&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/tr&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;tr&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;3&lt;\/td&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;Jasper&lt;\/td&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;Tom&lt;\/td&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/tr&gt;\n&nbsp;&nbsp;&nbsp;&lt;\/tbody&gt;\n\n&nbsp;&lt;\/table&gt;<\/code><\/pre>\n\n\n\n<p>K\u1ebft qu\u1ea3:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXcWMShB_bVvHCSs3zwCN-R3Td1l5G1t_kEb3prtEpFqxjF9_AX_g4F4D7Aj5Zt5x4gL8DE9HxrENq4Nxg9JhOeSwCYMg2GPGae4E88RsYelB4nx0dmGEDytadZgRH9MzHLKFSN_Cw?key=bU5nUsG1WgvsZNscy82J6Q\" alt=\"\"\/><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"h-striped-columns-s\u1ecdc-xen-k\u1ebd-c\u1ed9t\"><strong>Striped columns: S\u1ecdc xen k\u1ebd c\u1ed9t<\/strong><\/h4>\n\n\n\n<p>\u0110\u1ec3 t\u1ea1o hi\u1ec7u \u1ee9ng xen k\u1ebd cho c\u00e1c c\u1ed9t thay v\u00ec h\u00e0ng, b\u1ea1n c\u00f3 th\u1ec3 s\u1eed d\u1ee5ng class <strong><code>.table-striped-columns<\/code>:<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;table class=\"table table-striped-columns\"&gt;\n\n&nbsp;&nbsp;&nbsp;&lt;thead&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;tr&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;th&gt;#&lt;\/th&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;th&gt;H\u1ecd&lt;\/th&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;th&gt;T\u00ean&lt;\/th&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;th&gt;Ch\u1ee9c v\u1ee5&lt;\/th&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/tr&gt;\n&nbsp;&nbsp;&nbsp;&lt;\/thead&gt;\n\n&nbsp;&nbsp;&nbsp;&lt;tbody&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;tr&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;1&lt;\/td&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;Mark&lt;\/td&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;Otto&lt;\/td&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;Admin&lt;\/td&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/tr&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;tr&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;2&lt;\/td&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;Jacob&lt;\/td&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;Thornton&lt;\/td&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;User&lt;\/td&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/tr&gt;\n&nbsp;&nbsp;&nbsp;&lt;\/tbody&gt;\n\n&nbsp;&lt;\/table&gt;<\/code><\/pre>\n\n\n\n<p>K\u1ebft qu\u1ea3:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXfA7a1Zeg6e1Ukz6pUedHIFBtjht40bbd0Zj6LoZ44fKZhqa_R0DkmSRl_24MuoyjsQbu95VHMyUAKonyUfbbTXRwIOokERuLywIp4SwpjkPAzbR4Y39m_WNBe37QlrQ9C4Nk7c?key=bU5nUsG1WgvsZNscy82J6Q\" alt=\"\"\/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-hi\u1ec7u-\u1ee9ng-hover\"><strong>Hi\u1ec7u \u1ee9ng hover<\/strong><\/h3>\n\n\n\n<p>\u0110\u1ec3 t\u1ea1o hi\u1ec7u \u1ee9ng hightlight cho t\u1eebng d\u00f2ng trong b\u1ea3ng khi r\u00ea chu\u1ed9t v\u00e0o, b\u1ea1n c\u00f3 th\u1ec3 s\u1eed d\u1ee5ng class <strong><code>.table-hover<\/code>. <\/strong>V\u1edbi class n\u00e0y, Bootstrap s\u1ebd t\u1ef1 \u0111\u1ed9ng th\u00eam hi\u1ec7u \u1ee9ng highlight nh\u1eb9 khi ng\u01b0\u1eddi d\u00f9ng r\u00ea chu\u1ed9t qua c\u00e1c h\u00e0ng trong ph\u1ea7n <code>&lt;tbody&gt;<\/code>.&nbsp;<\/p>\n\n\n\n<p>V\u00ed d\u1ee5:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;table class=\"table table-hover\"&gt;\n\n&nbsp;&nbsp;&nbsp;&lt;thead&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;tr&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;th&gt;#&lt;\/th&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;th&gt;H\u1ecd&lt;\/th&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;th&gt;T\u00ean&lt;\/th&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/tr&gt;\n&nbsp;&nbsp;&nbsp;&lt;\/thead&gt;\n\n&nbsp;&nbsp;&nbsp;&lt;tbody&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;tr&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;1&lt;\/td&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;Mark&lt;\/td&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;Otto&lt;\/td&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/tr&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;tr&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;2&lt;\/td&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;Jacob&lt;\/td&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;Thornton&lt;\/td&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/tr&gt;\n&nbsp;&nbsp;&nbsp;&lt;\/tbody&gt;\n\n&nbsp;&lt;\/table&gt;<\/code><\/pre>\n\n\n\n<p>K\u1ebft qu\u1ea3:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Khi r\u00ea chu\u1ed9t v\u00e0o h\u00e0ng s\u1ed1 1<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXcG5ZILjsv8LsN1picunJhaeDuiitG-UbJiQFtGcqjUxMYkypfxYBawGgYGW-XI-xUZ8DJqaoLloIDzRNR7u3rQCr2hzu3kn3oiA_ieAKnzH1jINKN6rrHFxgSZU_MrkP6LX21S?key=bU5nUsG1WgvsZNscy82J6Q\" alt=\"\"\/><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Khi r\u00ea chu\u1ed9t v\u00e0o h\u00e0ng s\u1ed1 2<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXd6aH86Sf-sNd5F_NKrVoDnzE_EKq_9pGPh6Oqkeye-312NMlIzH0NoTcOMy_SUViLFmp4gFpgqKv-HK-u71VZVgNnxZ8302Fd1e2rR3fdBfq8cyITBpFJth71kgxu8zsEG8EBtWA?key=bU5nUsG1WgvsZNscy82J6Q\" alt=\"\"\/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-active-tables\"><strong>Active tables<\/strong><\/h3>\n\n\n\n<p>Trong nhi\u1ec1u t\u00ecnh hu\u1ed1ng, b\u1ea1n c\u1ea7n l\u00e0m n\u1ed5i b\u1eadt m\u1ed9t h\u00e0ng ho\u1eb7c \u00f4 c\u1ee5 th\u1ec3, ch\u1eb3ng h\u1ea1n \u0111\u1ec3 \u0111\u00e1nh d\u1ea5u d\u00f2ng \u0111ang \u0111\u01b0\u1ee3c ch\u1ecdn, ho\u1eb7c th\u1ec3 hi\u1ec7n tr\u1ea1ng th\u00e1i \u201cactive\u201d (\u0111ang ho\u1ea1t \u0111\u1ed9ng). Bootstrap h\u1ed7 tr\u1ee3 s\u1eb5n class <code>.table-active<\/code> cho m\u1ee5c \u0111\u00edch n\u00e0y.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>D\u00f9ng cho c\u1ea3 h\u00e0ng:<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;tr class=\"table-active\"&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;1&lt;\/td&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;Mark&lt;\/td&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;Otto&lt;\/td&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/tr&gt;<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\">\n<li>D\u00f9ng cho m\u1ed9t \u00f4 ri\u00eang bi\u1ec7t:<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td <em>class<\/em>=\"table-active\"&gt;Thornton&lt;\/td&gt;<\/code><\/pre>\n\n\n\n<p>K\u1ebft qu\u1ea3:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXeAS0Q348lIEbHH7pLn6prN8PCwH9GLyTrSGQzB5fntC8QJjX-QVrbT7QAx6RugXYowbIz4SPvO2mlo8R705E_5HrsKROBheWcuCipeosJJmaUsR82MDJpCxvTxZMBw9YK2qE7ykg?key=bU5nUsG1WgvsZNscy82J6Q\" alt=\"\"\/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-responsive-tables-trong-bootstrap\"><span class=\"ez-toc-section\" id=\"Responsive_Tables_trong_Bootstrap\"><\/span><strong>Responsive Tables trong Bootstrap<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Trong tr\u01b0\u1eddng h\u1ee3p b\u1ea1n l\u00e0m vi\u1ec7c v\u1edbi b\u1ea3ng c\u00f3 nhi\u1ec1u c\u1ed9t, vi\u1ec7c gi\u1eef b\u1ea3ng hi\u1ec3n th\u1ecb \u0111\u1eb9p v\u00e0 kh\u00f4ng v\u1ee1 b\u1ed1 c\u1ee5c (\u0111\u1eb7c bi\u1ec7t l\u00e0 tr\u00ean thi\u1ebft b\u1ecb nh\u1ecf nh\u01b0 \u0111i\u1ec7n tho\u1ea1i) l\u00e0 m\u1ed9t th\u1eed th\u00e1ch. Bootstrap gi\u1ea3i quy\u1ebft v\u1ea5n \u0111\u1ec1 n\u00e0y b\u1eb1ng c\u00e1ch cung c\u1ea5p t\u00ednh n\u0103ng responsive table c\u1ef1c k\u1ef3 \u0111\u01a1n gi\u1ea3n v\u00e0 hi\u1ec7u qu\u1ea3.<\/p>\n\n\n\n<p>B\u1ea1n ch\u1ec9 c\u1ea7n b\u1ecdc b\u1ea3ng trong m\u1ed9t th\u1ebb <strong>div<\/strong> c\u00f3 class <strong><code>.table-responsive<\/code><\/strong>, Bootstrap s\u1ebd t\u1ef1 \u0111\u1ed9ng cho ph\u00e9p b\u1ea3ng cu\u1ed9n ngang n\u1ebfu n\u1ed9i dung v\u01b0\u1ee3t qu\u00e1 chi\u1ec1u r\u1ed9ng c\u1ee7a m\u00e0n h\u00ecnh.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code> &lt;div class=\"table-responsive\"&gt;\n&nbsp;&nbsp;&nbsp;&lt;table class=\"table\"&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;...\n&nbsp;&nbsp;&nbsp;&lt;\/table&gt;\n&nbsp;&lt;\/div&gt;<\/code><\/pre>\n\n\n\n<p>Khi b\u1ea3ng c\u00f3 qu\u00e1 nhi\u1ec1u c\u1ed9t, ng\u01b0\u1eddi d\u00f9ng s\u1ebd th\u1ea5y thanh cu\u1ed9n ngang xu\u1ea5t hi\u1ec7n \u2013 gi\u00fap giao di\u1ec7n kh\u00f4ng b\u1ecb v\u1ee1 m\u00e0 v\u1eabn xem \u0111\u01b0\u1ee3c \u0111\u1ea7y \u0111\u1ee7 d\u1eef li\u1ec7u.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-responsive-theo-breakpoint\"><strong>Responsive theo breakpoint<\/strong><\/h3>\n\n\n\n<p>Bootstrap c\u00f2n cho ph\u00e9p b\u1ea1n ch\u1ec9 \u00e1p d\u1ee5ng responsive table \u1edf m\u1ed9t s\u1ed1 k\u00edch th\u01b0\u1edbc m\u00e0n h\u00ecnh nh\u1ea5t \u0111\u1ecbnh, th\u00f4ng qua c\u00e1c class:<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><tbody><tr><td><strong>Class<\/strong><\/td><td><strong>\u00c1p d\u1ee5ng responsive cho k\u00edch th\u01b0\u1edbc<\/strong><\/td><\/tr><tr><td><strong>.table-responsive-sm<\/strong><\/td><td>\u2265 576px<\/td><\/tr><tr><td><strong>.table-responsive-md<\/strong><\/td><td>\u2265 768px<\/td><\/tr><tr><td><strong>.table-responsive-lg<\/strong><\/td><td>\u2265 992px<\/td><\/tr><tr><td><strong>.table-responsive-xl<\/strong><\/td><td>\u2265 1200px<\/td><\/tr><tr><td><strong>.table-responsive-xxl<\/strong><\/td><td>\u2265 1400px<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p>V\u00ed d\u1ee5, \u0111\u1ec3 b\u1ea3ng cu\u1ed9n ngang t\u1eeb m\u00e0n h\u00ecnh \u2265 768px tr\u1edf xu\u1ed1ng, c\u00f2n t\u1eeb 768px tr\u1edf l\u00ean th\u00ec b\u1ea3ng hi\u1ec3n th\u1ecb b\u00ecnh th\u01b0\u1eddng:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;div class=\"table-responsive-md\"&gt;\n&nbsp;&lt;table class=\"table\"&gt;\n&nbsp;&nbsp;&nbsp;...\n&nbsp;&lt;\/table&gt;\n&lt;\/div&gt;<\/code><\/pre>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p><em>\u0110\u1ecdc th\u00eam: <strong><a href=\"https:\/\/itviec.com\/blog\/cach-tuy-chinh-bootstrap-responsive\/\" target=\"_blank\" rel=\"noreferrer noopener\">Responsive trong Bootstrap: H\u01b0\u1edbng d\u1eabn t\u1eeb c\u01a1 b\u1ea3n \u0111\u1ebfn n\u00e2ng cao<\/a><\/strong><\/em><\/p>\n<\/blockquote>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-tuy-ch\u1ec9nh-table-bootstrap\"><span class=\"ez-toc-section\" id=\"Tuy_chinh_Table_Bootstrap\"><\/span><strong>T\u00f9y ch\u1ec9nh Table Bootstrap<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Bootstrap cung c\u1ea5p s\u1eb5n r\u1ea5t nhi\u1ec1u class gi\u00fap b\u1ea1n t\u1ea1o b\u1ea3ng \u0111\u1eb9p m\u1eaft m\u1ed9t c\u00e1ch nhanh ch\u00f3ng. Tuy nhi\u00ean, \u0111\u00f4i khi b\u1ea1n s\u1ebd c\u1ea7n t\u00f9y ch\u1ec9nh th\u00eam \u0111\u1ec3 ph\u00f9 h\u1ee3p v\u1edbi giao di\u1ec7n, ch\u1ee9c n\u0103ng, ho\u1eb7c phong c\u00e1ch thi\u1ebft k\u1ebf ri\u00eang c\u1ee7a d\u1ef1 \u00e1n. D\u01b0\u1edbi \u0111\u00e2y l\u00e0 nh\u1eefng c\u00e1ch ph\u1ed5 bi\u1ebfn \u0111\u1ec3 t\u00f9y ch\u1ec9nh b\u1ea3ng trong Bootstrap:<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-k\u1ebft-h\u1ee3p-nhi\u1ec1u-class-d\u1ec3-thay-d\u1ed5i-giao-di\u1ec7n-b\u1ea3ng\"><strong>K\u1ebft h\u1ee3p nhi\u1ec1u class \u0111\u1ec3 thay \u0111\u1ed5i giao di\u1ec7n b\u1ea3ng<\/strong><\/h3>\n\n\n\n<p>B\u1ea1n c\u00f3 th\u1ec3 k\u1ebft h\u1ee3p c\u00e1c l\u1edbp ti\u1ec7n \u00edch c\u00f3 s\u1eb5n c\u1ee7a Bootstrap \u0111\u1ec3 tho\u1ea3i m\u00e1i t\u1ea1o ra nh\u1eefng b\u1ea3ng v\u1edbi \u0111\u1ecbnh d\u1ea1ng theo \u00fd th\u00edch, v\u1eeba g\u1ecdn g\u00e0ng, v\u1eeba d\u1ec5 \u0111\u1ecdc. V\u00ed d\u1ee5:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;table class=\"table table-striped table-hover table-bordered table-sm\"&gt;\n\n&nbsp;&nbsp;&nbsp;&lt;thead&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;tr class=\"table-primary\"&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;th&gt;#&lt;\/th&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;th&gt;H\u1ecd&lt;\/th&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;th&gt;T\u00ean&lt;\/th&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/tr&gt;\n&nbsp;&nbsp;&nbsp;&lt;\/thead&gt;\n\n&nbsp;&nbsp;&nbsp;&lt;tbody&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;tr&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;1&lt;\/td&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;Mark&lt;\/td&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;Otto&lt;\/td&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/tr&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;tr&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;2&lt;\/td&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;Jacob&lt;\/td&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td &gt;Thornton&lt;\/td&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/tr&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;tr&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;3&lt;\/td&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;Jasper&lt;\/td&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td &gt;Tom&lt;\/td&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/tr&gt;\n&nbsp;&nbsp;&nbsp;&lt;\/tbody&gt;\n\n&nbsp;&lt;\/table&gt;<\/code><\/pre>\n\n\n\n<p>N\u1ed9i dung n\u00e0y s\u1ebd t\u1ea1o ra b\u1ea3ng v\u1edbi:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>K\u00edch th\u01b0\u1edbc g\u1ecdn h\u01a1n nh\u1edd <strong><code>.table-sm<\/code><\/strong><\/li>\n\n\n\n<li>T\u1ea1o hi\u1ec7u \u1ee9ng xen k\u1ebd h\u00e0ng b\u1eb1ng <strong><code>.table-striped<\/code><\/strong><\/li>\n\n\n\n<li>B\u1ed5 sung to\u00e0n b\u1ed9 \u0111\u01b0\u1eddng vi\u1ec1n b\u1eb1ng <code><strong>.table-bordered<\/strong><\/code><\/li>\n\n\n\n<li>\u0110\u1ed5i m\u00e0u header b\u1eb1ng <strong><code>.table-primary<\/code><\/strong><\/li>\n<\/ul>\n\n\n\n<p>K\u1ebft qu\u1ea3:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXebo9-1yFcl2XdZ0zkZVjmM7vKQn_20Lyitd4SZTMYdmPjTrFGNq3v3RbL9OnJxVBMrHdBuVV8YMfRruDjjMuU--yWYOJZfQIwNHHKFjpond0J78KTTCHuJLbgd7xxZeQmZrMvmuQ?key=bU5nUsG1WgvsZNscy82J6Q\" alt=\"\"\/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-tu\u1ef3-ch\u1ec9nh-mau-s\u1eafc-b\u1ea3ng\"><strong>Tu\u1ef3 ch\u1ec9nh m\u00e0u s\u1eafc b\u1ea3ng<\/strong><\/h3>\n\n\n\n<p>Theo m\u1eb7c \u0111\u1ecbnh, b\u1ea1n c\u00f3 th\u1ec3 s\u1eed d\u1ee5ng table variants c\u00f3 s\u1eb5n nh\u01b0 <code>.table-primary<\/code>, <code>.table-danger<\/code>, <code>.table-success<\/code>, ho\u1eb7c c\u0169ng c\u00f3 th\u1ec3 t\u1ef1 \u0111\u1ecbnh ngh\u0129a m\u00e0u s\u1eafc b\u1eb1ng CSS. V\u00ed d\u1ee5:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;style&gt;\n&nbsp;.table-custom {\n&nbsp;&nbsp;&nbsp;background-color: #f0f9ff;\n&nbsp;}\n&lt;\/style&gt;\n\n&lt;table class=\"table table-custom\"&gt;\n&nbsp;...\n&lt;\/table&gt;<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-thay-d\u1ed5i-font-padding-border-b\u1eb1ng-css\"><strong>Thay \u0111\u1ed5i font, padding, border b\u1eb1ng CSS<\/strong><\/h3>\n\n\n\n<p>N\u1ebfu b\u1ea1n mu\u1ed1n tinh ch\u1ec9nh chi ti\u1ebft h\u01a1n (v\u00ed d\u1ee5: t\u0103ng kho\u1ea3ng c\u00e1ch gi\u1eefa c\u00e1c \u00f4, \u0111\u1ed5i font ch\u1eef, bo g\u00f3c vi\u1ec1n&#8230;), b\u1ea1n c\u00f3 th\u1ec3 vi\u1ebft CSS ri\u00eang ho\u1eb7c ghi \u0111\u00e8 l\u1ea1i class Bootstrap. V\u00ed d\u1ee5:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;style&gt;\n.custom-table td {\n&nbsp;padding: 1.5rem;\n&nbsp;font-family: 'Roboto', sans-serif;\n&nbsp;border-radius: 4px;\n}\n&lt;\/style&gt;\n\n&lt;table class=\"table custom-table\"&gt;\n&nbsp;...\n&lt;\/table&gt;<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-bai-t\u1eadp-table-bootstrap\"><span class=\"ez-toc-section\" id=\"Bai_tap_Table_Bootstrap\"><\/span><strong>B\u00e0i t\u1eadp Table Bootstrap<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-bai-t\u1eadp-1-d\u1ec5\"><strong>B\u00e0i t\u1eadp 1 (D\u1ec5)<\/strong><\/h3>\n\n\n\n<p>T\u1ea1o b\u1ea3ng danh s\u00e1ch c\u00e1c b\u00e0i vi\u1ebft g\u1ed3m c\u00e1c c\u1ed9t: #, Ti\u00eau \u0111\u1ec1, T\u00e1c gi\u1ea3, Ng\u00e0y \u0111\u0103ng.<\/p>\n\n\n\n<p>Y\u00eau c\u1ea7u b\u1ea3ng c\u00f3:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Giao di\u1ec7n s\u00e1ng<\/li>\n\n\n\n<li>Hi\u1ec7u \u1ee9ng hover khi r\u00ea chu\u1ed9t<\/li>\n\n\n\n<li>M\u1ed9t h\u00e0ng \u0111\u01b0\u1ee3c \u0111\u00e1nh d\u1ea5u l\u00e0 n\u1ed5i b\u1eadt b\u1edfi v\u00ec l\u00e0 b\u00e0i vi\u1ebft \u0111ang \u0111\u01b0\u1ee3c xem nhi\u1ec1u<\/li>\n<\/ul>\n\n\n\n<p>H\u00ecnh \u1ea3nh tham kh\u1ea3o:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXcO5cl67208qrw-2ejodhKoAiX2SXUhYkETP8oU7SO1YCQCzDstEl6zKl5jlGg7iWtiW5royvH9IIHSV3mGKce21_cFXAfQiufmJCC88Eylv78CZheR5TcLfYRODWc6BA4fqn1yKA?key=bU5nUsG1WgvsZNscy82J6Q\" alt=\"\"\/><\/figure>\n\n\n\n<details class=\"wp-block-details is-layout-flow wp-block-details-is-layout-flow\"><summary>L\u1eddi gi\u1ea3i B\u00e0i t\u1eadp 1<\/summary>\n<p>S\u1eed d\u1ee5ng <strong><code>.table-light<\/code><\/strong> \u0111\u1ec3 t\u1ea1o giao di\u1ec7n s\u00e1ng, <strong><code>.table-hover<\/code><\/strong> \u0111\u1ec3 t\u1ea1o hi\u1ec7u \u1ee9ng khi r\u00ea chu\u1ed9t v\u00e0 <strong><code>.table-active<\/code><\/strong> cho h\u00e0ng ch\u1ee9a b\u00e0i vi\u1ebft \u0111\u01b0\u1ee3c xem nhi\u1ec1u nh\u1ea5t:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;table class=\"table table-light table-hover\"&gt;\n\n&nbsp;&nbsp;&nbsp;&lt;thead&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;tr&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;th&gt;#&lt;\/th&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;th&gt;Ti\u00eau \u0111\u1ec1&lt;\/th&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;th&gt;T\u00e1c gi\u1ea3&lt;\/th&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;th&gt;Ng\u00e0y \u0111\u0103ng&lt;\/th&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/tr&gt;\n&nbsp;&nbsp;&nbsp;&lt;\/thead&gt;\n\n&nbsp;&nbsp;&nbsp;&lt;tbody&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;tr&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;1&lt;\/td&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;L\u00e0m ch\u1ee7 Flexbox trong 10 ph\u00fat&lt;\/td&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;Ho\u00e0ng Minh&lt;\/td&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;25\/05\/2025&lt;\/td&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/tr&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;tr class=\"table-active\"&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;2&lt;\/td&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;Top 10 plugin VSCode cho Frontend&lt;\/td&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;Lan H\u01b0\u01a1ng&lt;\/td&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;24\/05\/2025&lt;\/td&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/tr&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;tr&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;3&lt;\/td&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;Responsive layout v\u1edbi Bootstrap 5&lt;\/td&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;Ph\u00fac L\u1ee3i&lt;\/td&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;22\/05\/2025&lt;\/td&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/tr&gt;\n&nbsp;&nbsp;&nbsp;&lt;\/tbody&gt;\n\n&nbsp;&lt;\/table&gt;<\/code><\/pre>\n<\/details>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-bai-t\u1eadp-2-trung-binh\"><strong>B\u00e0i t\u1eadp 2 (Trung b\u00ecnh)<\/strong><\/h3>\n\n\n\n<p>T\u1ea1o b\u1ea3ng hi\u1ec3n th\u1ecb gi\u1ecf h\u00e0ng g\u1ed3m: STT, T\u00ean s\u1ea3n ph\u1ea9m, S\u1ed1 l\u01b0\u1ee3ng, \u0110\u01a1n gi\u00e1, Th\u00e0nh ti\u1ec1n. Y\u00eau c\u1ea7u b\u1ea3ng c\u00f3:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>K\u00edch th\u01b0\u1edbc g\u1ecdn ph\u00f9 h\u1ee3p cho b\u1ea3ng nhi\u1ec1u d\u00f2ng<\/li>\n\n\n\n<li>C\u00e1c h\u00e0ng \u0111\u01b0\u1ee3c xen k\u1ebd m\u00e0u s\u1eafc \u0111\u1ec3 d\u1ec5 ph\u00e2n bi\u1ec7t<\/li>\n\n\n\n<li>C\u00f3 1 d\u00f2ng t\u1ed5ng c\u1ed9ng \u0111\u01b0\u1ee3c t\u00e1ch r\u00f5 v\u00e0 c\u00f3 m\u00e0u n\u1ed5i b\u1eadt \u0111\u1ec3 d\u1ec5 nh\u1eadn bi\u1ebft<\/li>\n<\/ul>\n\n\n\n<p>H\u00ecnh \u1ea3nh:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXd5Icre3q_aVIwPfWMQLfVq6kdMJbo56mR_9lW1novDXrTvCTg3Dx1sjUSe5bVvhCM-5iR4g-JD3tSwSlSwGnBeox-bKghu8WA1Y_C81cN17JUzdbTJDw83JK8yZsjf3jZGxal8Rg?key=bU5nUsG1WgvsZNscy82J6Q\" alt=\"\"\/><\/figure>\n\n\n\n<details class=\"wp-block-details is-layout-flow wp-block-details-is-layout-flow\"><summary>L\u1eddi gi\u1ea3i B\u00e0i t\u1eadp 2<\/summary>\n<p>S\u1eed d\u1ee5ng <code>.table-sm<\/code> \u0111\u1ec3 b\u1ea3ng c\u00f3 k\u00edch th\u01b0\u1edbc g\u1ecdn h\u01a1n, s\u1eed d\u1ee5ng <code>.table-striped<\/code> \u0111\u1ec3 t\u1ea1o hi\u1ec7u \u1ee9ng xen k\u1ebd d\u00f2ng.<\/p>\n\n\n\n<p>\u0110\u1ed1i v\u1edbi d\u00f2ng t\u1ed5ng c\u1ed9ng, th\u1ef1c hi\u1ec7n g\u1ed9p d\u00f2ng, th\u00eam <strong><code>.table-group-divider<\/code><\/strong> \u0111\u1ec3 t\u00e1ch bi\u1ec7t v\u1edbi c\u00e1c d\u00f2ng b\u00ean tr\u00ean v\u00e0 <strong><code>.table-success<\/code><\/strong> \u0111\u1ec3 t\u1ea1o m\u00e0u s\u1eafc n\u1ed5i b\u1eadt:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;table class=\"table table-striped table-sm\"&gt;\n\n&nbsp;&nbsp;&nbsp;&lt;thead&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;tr&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;th&gt;STT&lt;\/th&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;th&gt;S\u1ea3n ph\u1ea9m&lt;\/th&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;th&gt;S\u1ed1 l\u01b0\u1ee3ng&lt;\/th&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;th&gt;\u0110\u01a1n gi\u00e1&lt;\/th&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;th&gt;Th\u00e0nh ti\u1ec1n&lt;\/th&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/tr&gt;\n&nbsp;&nbsp;&nbsp;&lt;\/thead&gt;\n\n&nbsp;&nbsp;&nbsp;&lt;tbody&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;tr&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;1&lt;\/td&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;Chu\u1ed9t kh\u00f4ng d\u00e2y Logitech&lt;\/td&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;2&lt;\/td&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;250.000\u0111&lt;\/td&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;500.000\u0111&lt;\/td&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/tr&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;tr&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;2&lt;\/td&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;B\u00e0n ph\u00edm c\u01a1 DareU&lt;\/td&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;1&lt;\/td&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;850.000\u0111&lt;\/td&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;850.000\u0111&lt;\/td&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/tr&gt;\n&nbsp;&nbsp;&nbsp;&lt;\/tbody&gt;\n\n&nbsp;&nbsp;&nbsp;&lt;tbody class=\"table-group-divider\"&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;tr class=\"table-success fw-bold\"&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td colspan=\"4\" class=\"text-end\"&gt;T\u1ed5ng c\u1ed9ng&lt;\/td&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;1.350.000\u0111&lt;\/td&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/tr&gt;\n&nbsp;&nbsp;&nbsp;&lt;\/tbody&gt;\n\n&nbsp;&lt;\/table&gt;<\/code><\/pre>\n<\/details>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-bai-t\u1eadp-3-kho\"><strong>B\u00e0i t\u1eadp 3 (Kh\u00f3)<\/strong><\/h3>\n\n\n\n<p>T\u1ea1o b\u1ea3ng danh s\u00e1ch nh\u00e2n vi\u00ean v\u1edbi c\u00e1c c\u1ed9t: #, H\u1ecd t\u00ean, Ph\u00f2ng ban, Ch\u1ee9c v\u1ee5, Ghi ch\u00fa. Y\u00eau c\u1ea7u:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>B\u1ea3ng c\u1ea7n cu\u1ed9n ngang khi tr\u00ean m\u00e0n h\u00ecnh nh\u1ecf<\/li>\n\n\n\n<li>C\u00f3 ph\u00e2n nh\u00f3m gi\u1eefa tr\u01b0\u1edfng ph\u00f2ng so v\u1edbi c\u00e1c nh\u00e2n vi\u00ean kh\u00e1c<\/li>\n\n\n\n<li>Canh gi\u1eefa n\u1ed9i dung to\u00e0n b\u1ea3ng<\/li>\n\n\n\n<li>C\u1ed9t &#8220;Ghi ch\u00fa&#8221; c\u00f3 n\u1ed9i dung d\u00e0i \u2192 canh xu\u1ed1ng d\u01b0\u1edbi<\/li>\n\n\n\n<li>M\u1ed9t nh\u00e2n vi\u00ean n\u1ed5i b\u1eadt \u0111\u01b0\u1ee3c \u0111\u00e1nh d\u1ea5u<\/li>\n<\/ul>\n\n\n\n<p>H\u00ecnh \u1ea3nh:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXcHKfaMkD518JxxHT3nPextRL4TF0369eHKGK47aR3hbcBaJ48ONONWirWrbBzDWbHkMFmtbScEYbSmukbMCJts4rGHFno3sBDYukeOY5hN8wV8UPLa3VYA-7WhWfGJ_DbDtsCBRw?key=bU5nUsG1WgvsZNscy82J6Q\" alt=\"\"\/><\/figure>\n\n\n\n<details class=\"wp-block-details is-layout-flow wp-block-details-is-layout-flow\"><summary>L\u1eddi gi\u1ea3i B\u00e0i t\u1eadp 3<\/summary>\n<p>S\u1eed d\u1ee5ng <strong><code>.table-responsive<\/code> <\/strong>\u0111\u1ec3 t\u1ea1o responsive cho table.<\/p>\n\n\n\n<p>\u0110\u1ec3 ph\u00e2n nh\u00f3m gi\u1eefa tr\u01b0\u1edfng ph\u00f2ng v\u00e0 nh\u00e2n vi\u00ean:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>S\u1eed d\u1ee5ng <strong><code>.table-group-divider<\/code> <\/strong>\u0111\u1ec3 t\u1ea1o border \u0111\u1eadm cho n\u1ed9i dung c\u1ee7a tr\u01b0\u1edfng ph\u00f2ng;<\/li>\n\n\n\n<li>S\u1eed d\u1ee5ng <strong><code>.align-middle<\/code><\/strong>, <strong><code>.align-bottom<\/code><\/strong> \u0111\u1ec3 canh ch\u1ec9nh n\u1ed9i dung;<\/li>\n\n\n\n<li>S\u1eed d\u1ee5ng <strong><code>.table-active<\/code><\/strong> \u0111\u1ec3 highlight nh\u00e2n vi\u00ean n\u1ed5i b\u1eadt.<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;div class=\"table-responsive\"&gt;\n&nbsp;&nbsp;&nbsp;&lt;table class=\"table align-middle\"&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;thead&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;tr&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;th&gt;#&lt;\/th&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;th&gt;H\u1ecd t\u00ean&lt;\/th&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;th&gt;Ph\u00f2ng ban&lt;\/th&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;th&gt;Ch\u1ee9c v\u1ee5&lt;\/th&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;th&gt;Ghi ch\u00fa&lt;\/th&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/tr&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/thead&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;tbody&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;tr&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;1&lt;\/td&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;Nguy\u1ec5n V\u0103n A&lt;\/td&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;Kinh doanh&lt;\/td&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;Tr\u01b0\u1edfng ph\u00f2ng&lt;\/td&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td class=\"align-bottom\"&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Qu\u1ea3n l\u00fd to\u00e0n b\u1ed9 ho\u1ea1t \u0111\u1ed9ng c\u1ee7a team kinh doanh, tri\u1ec3n khai chi\u1ebfn l\u01b0\u1ee3c b\u00e1n h\u00e0ng.\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/td&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/tr&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/tbody&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;tbody class=\"table-group-divider\"&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;tr class=\"table-active\"&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;2&lt;\/td&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;Tr\u1ea7n Th\u1ecb B&lt;\/td&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;Marketing&lt;\/td&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;Nh\u00e2n vi\u00ean&lt;\/td&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td class=\"align-bottom\"&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Ph\u1ee5 tr\u00e1ch n\u1ed9i dung v\u00e0 social media.\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/td&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/tr&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;tr&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;3&lt;\/td&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;L\u00ea Qu\u1ed1c C&lt;\/td&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;IT&lt;\/td&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;Dev Backend&lt;\/td&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td class=\"align-bottom\"&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;X\u1eed l\u00fd server v\u00e0 b\u1ea3o tr\u00ec h\u1ec7 th\u1ed1ng n\u1ed9i b\u1ed9.\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/td&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/tr&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/tbody&gt;\n\n&nbsp;&nbsp;&nbsp;&lt;\/table&gt;\n&nbsp;&lt;\/div&gt;<\/code><\/pre>\n<\/details>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-cau-h\u1ecfi-th\u01b0\u1eddng-g\u1eb7p-v\u1ec1-table-bootstrap\"><span class=\"ez-toc-section\" id=\"Cau_hoi_thuong_gap_ve_Table_Bootstrap\"><\/span><strong>C\u00e2u h\u1ecfi th\u01b0\u1eddng g\u1eb7p v\u1ec1 Table Bootstrap<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-co-th\u1ec3-k\u1ebft-h\u1ee3p-nhi\u1ec1u-l\u1edbp-d\u1ecbnh-d\u1ea1ng-b\u1ea3ng-cung-luc-khong\"><strong>C\u00f3 th\u1ec3 k\u1ebft h\u1ee3p nhi\u1ec1u l\u1edbp \u0111\u1ecbnh d\u1ea1ng b\u1ea3ng c\u00f9ng l\u00fac kh\u00f4ng?<\/strong><\/h3>\n\n\n\n<p>Ho\u00e0n to\u00e0n \u0111\u01b0\u1ee3c. Bootstrap \u0111\u01b0\u1ee3c thi\u1ebft k\u1ebf r\u1ea5t linh ho\u1ea1t, cho ph\u00e9p b\u1ea1n k\u1ebft h\u1ee3p nhi\u1ec1u l\u1edbp (class) \u0111\u1ec3 t\u1ea1o b\u1ea3ng ph\u00f9 h\u1ee3p v\u1edbi nhu c\u1ea7u. B\u1ea1n c\u00f3 th\u1ec3 t\u00f9y ch\u1ecdn class theo \u0111\u00fang giao di\u1ec7n mong mu\u1ed1n m\u00e0 kh\u00f4ng lo b\u1ecb xung \u0111\u1ed9t.<\/p>\n\n\n\n<p>V\u00ed d\u1ee5:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;table class=\"table table-striped table-bordered table-hover table-sm\"&gt;\n&nbsp;&nbsp;&nbsp;...\n&nbsp;&lt;\/table&gt;<\/code><\/pre>\n\n\n\n<p>\u0110i\u1ec1u n\u00e0y s\u1ebd t\u1ea1o ra 1 b\u1ea3ng v\u1edbi:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>.table<\/code>: B\u1eaft bu\u1ed9c, \u0111\u1ec3 \u00e1p d\u1ee5ng style b\u1ea3ng c\u01a1 b\u1ea3n<\/li>\n\n\n\n<li><code>.table-striped<\/code>: T\u1ea1o s\u1ecdc xen k\u1ebd<\/li>\n\n\n\n<li><code>.table-bordered<\/code>: Th\u00eam vi\u1ec1n cho \u00f4<\/li>\n\n\n\n<li><code>.table-hover<\/code>: Hi\u1ec7u \u1ee9ng khi r\u00ea chu\u1ed9t<\/li>\n\n\n\n<li><code>.table-sm<\/code>: Thu g\u1ecdn b\u1ea3ng<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-lam-th\u1ebf-nao-d\u1ec3-thay-d\u1ed5i-mau-s\u1eafc-c\u1ee7a-b\u1ea3ng\"><strong>L\u00e0m th\u1ebf n\u00e0o \u0111\u1ec3 thay \u0111\u1ed5i m\u00e0u s\u1eafc c\u1ee7a b\u1ea3ng?<\/strong><\/h3>\n\n\n\n<p>\u0110\u1ec3 thay \u0111\u1ed5i m\u00e0u s\u1eafc c\u1ee7a Table trong Bootstrap, b\u1ea1n c\u00f3 th\u1ec3 s\u1eed d\u1ee5ng 2 c\u00e1ch sau:<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"h-dung-bi\u1ebfn-th\u1ec3-b\u1ea3ng-co-s\u1eb5n-v\u1edbi-table-nbsp\"><strong>D\u00f9ng bi\u1ebfn th\u1ec3 b\u1ea3ng c\u00f3 s\u1eb5n v\u1edbi .table-*:&nbsp;<\/strong><\/h4>\n\n\n\n<p>Bootstrap cung c\u1ea5p s\u1eb5n c\u00e1c bi\u1ebfn th\u1ec3 b\u1ea3ng \u0111\u1ec3 \u0111\u1ed5i m\u00e0u n\u1ec1n nh\u01b0:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong><code>.table-primary<\/code>: <\/strong>L\u00e0m n\u1ed5i b\u1eadt c\u00e1c h\u00e0ng ho\u1eb7c b\u1ea3ng quan tr\u1ecdng, ti\u00eau \u0111\u1ec1 ch\u00ednh, ho\u1eb7c ph\u1ea7n d\u1eef li\u1ec7u c\u1ed1t l\u00f5i.<\/li>\n\n\n\n<li><strong><code>.table-success<\/code>: <\/strong>Bi\u1ec3u th\u1ecb tr\u1ea1ng th\u00e1i t\u1ed1t, ho\u00e0n th\u00e0nh, x\u00e1c nh\u1eadn th\u00e0nh c\u00f4ng, h\u1ee3p l\u1ec7.<\/li>\n\n\n\n<li><strong><code>.table-danger<\/code>: <\/strong>D\u00f9ng \u0111\u1ec3 c\u1ea3nh b\u00e1o l\u1ed7i, tr\u1ea1ng th\u00e1i th\u1ea5t b\u1ea1i, ho\u1eb7c \u0111i\u1ec1u g\u00ec \u0111\u00f3 c\u1ea7n ng\u01b0\u1eddi d\u00f9ng ch\u00fa \u00fd.<\/li>\n\n\n\n<li><strong><code>.table-warning<\/code>: <\/strong>Bi\u1ec3u th\u1ecb th\u00f4ng tin c\u1ea3nh b\u00e1o, t\u1ea1m th\u1eddi, c\u1ea7n ki\u1ec3m tra l\u1ea1i.<\/li>\n\n\n\n<li><strong><code>.table-info<\/code>: <\/strong>D\u00f9ng \u0111\u1ec3 hi\u1ec3n th\u1ecb th\u00f4ng tin b\u1ed5 sung, trung l\u1eadp, kh\u00f4ng mang t\u00ednh c\u1ea3nh b\u00e1o hay l\u1ed7i.<\/li>\n\n\n\n<li><strong><code>.table-dark<\/code>: <\/strong>Th\u01b0\u1eddng d\u00f9ng \u0111\u1ec3 l\u00e0m b\u1ea3ng n\u1ed5i b\u1eadt trong theme t\u1ed1i, ho\u1eb7c trong c\u00e1c khu v\u1ef1c qu\u1ea3n tr\u1ecb, dashboard.<\/li>\n\n\n\n<li><strong><code>.table-light<\/code>: <\/strong>T\u1ea1o c\u1ea3m gi\u00e1c nh\u1eb9 nh\u00e0ng, hi\u1ec7n \u0111\u1ea1i. Th\u01b0\u1eddng d\u00f9ng cho theme s\u00e1ng ho\u1eb7c c\u00e1c b\u1ea3ng kh\u00f4ng c\u1ea7n m\u00e0u s\u1eafc tr\u1ea1ng th\u00e1i.<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"h-tuy-ch\u1ec9nh-b\u1eb1ng-css\"><strong>T\u00f9y ch\u1ec9nh b\u1eb1ng CSS:<\/strong><\/h4>\n\n\n\n<p>Trong tr\u01b0\u1eddng h\u1ee3p b\u1ea1n mu\u1ed1n s\u1eed d\u1ee5ng m\u00e0u s\u1eafc kh\u00f4ng n\u1eb1m trong c\u00e1c bi\u1ebfn th\u1ec3 c\u00f3 s\u1eb5n c\u1ee7a Bootstrap, b\u1ea1n c\u00f3 th\u1ec3 b\u1ed5 sung n\u00f3 b\u1eb1ng class CSS t\u00f9y ch\u1ec9nh v\u00e0 \u00e1p d\u1ee5ng cho table. V\u00ed d\u1ee5:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;style&gt;\n.my-custom-table {\n&nbsp;background-color: #f0f9ff;\n}\n&lt;\/style&gt;\n\n&lt;table class=\"table my-custom-table\"&gt;\n&nbsp;...\n&lt;\/table&gt;<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-lam-th\u1ebf-nao-d\u1ec3-can-ch\u1ec9nh-n\u1ed9i-dung-theo-chi\u1ec1u-d\u1ecdc-trong-b\u1ea3ng\"><strong>L\u00e0m th\u1ebf n\u00e0o \u0111\u1ec3 c\u0103n ch\u1ec9nh n\u1ed9i dung theo chi\u1ec1u d\u1ecdc trong b\u1ea3ng?<\/strong><\/h3>\n\n\n\n<p>Bootstrap h\u1ed7 tr\u1ee3 c\u00e1c class vertical alignment \u0111\u1ec3 canh n\u1ed9i dung theo chi\u1ec1u d\u1ecdc nh\u01b0 sau:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>.align-top<\/code>: C\u0103n n\u1ed9i dung l\u00ean tr\u00ean c\u00f9ng<\/li>\n\n\n\n<li><code>.align-middle<\/code>: C\u0103n gi\u1eefa theo chi\u1ec1u d\u1ecdc<\/li>\n\n\n\n<li><code>.align-bottom<\/code>: C\u0103n xu\u1ed1ng d\u01b0\u1edbi c\u00f9ng.<\/li>\n<\/ul>\n\n\n\n<p>B\u1ea1n c\u00f3 th\u1ec3 \u00e1p d\u1ee5ng c\u00e1c class n\u00e0y v\u00e0o:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>C\u1ea3 b\u1ea3ng:&nbsp;<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;table class=\"table align-middle\"&gt;<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\">\n<li>M\u1ed9t h\u00e0ng:<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;tr class=\"align-bottom\"&gt;<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\">\n<li>M\u1ed9t \u00f4:&nbsp;<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;td class=\"align-top\"&gt;<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-t\u1ed5ng-k\u1ebft\"><span class=\"ez-toc-section\" id=\"Tong_ket\"><\/span><strong>T\u1ed5ng k\u1ebft<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Table trong Bootstrap l\u00e0 c\u00f4ng c\u1ee5 m\u1ea1nh m\u1ebd gi\u00fap l\u1eadp tr\u00ecnh vi\u00ean tr\u00ecnh b\u00e0y d\u1eef li\u1ec7u m\u1ed9t c\u00e1ch tr\u1ef1c quan, d\u1ec5 \u0111\u1ecdc v\u00e0 d\u1ec5 qu\u1ea3n l\u00fd. V\u1edbi h\u1ec7 th\u1ed1ng class ti\u1ec7n \u00edch \u0111a d\u1ea1ng t\u1eeb vi\u1ec1n, m\u00e0u s\u1eafc, canh l\u1ec1 \u0111\u1ebfn hi\u1ec7u \u1ee9ng t\u01b0\u01a1ng t\u00e1c v\u00e0 kh\u1ea3 n\u0103ng responsive, Bootstrap gi\u00fap vi\u1ec7c x\u00e2y d\u1ef1ng b\u1ea3ng tr\u1edf n\u00ean nhanh ch\u00f3ng, chu\u1ea9n \u0111\u1eb9p m\u00e0 kh\u00f4ng c\u1ea7n vi\u1ebft nhi\u1ec1u CSS th\u1ee7 c\u00f4ng. Qua b\u00e0i vi\u1ebft n\u00e0y, ITviec hi v\u1ecdng b\u1ea1n \u0111\u00e3 n\u1eafm v\u1eefng c\u00e1ch s\u1eed d\u1ee5ng, tu\u1ef3 ch\u1ec9nh v\u00e0 k\u1ebft h\u1ee3p c\u00e1c t\u00ednh n\u0103ng c\u1ee7a table trong Bootstrap \u0111\u1ec3 t\u1ea1o ra nh\u1eefng b\u1ea3ng d\u1eef li\u1ec7u chuy\u00ean nghi\u1ec7p, ph\u00f9 h\u1ee3p v\u1edbi m\u1ecdi lo\u1ea1i giao di\u1ec7n web t\u1eeb c\u01a1 b\u1ea3n \u0111\u1ebfn n\u00e2ng cao.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Trong qu\u00e1 tr\u00ecnh x\u00e2y d\u1ef1ng giao di\u1ec7n web, b\u1ea3ng (table) l\u00e0 c\u00f4ng c\u1ee5 kh\u00f4ng th\u1ec3 thi\u1ebfu \u0111\u1ec3 tr\u00ecnh b\u00e0y d\u1eef li\u1ec7u m\u1ed9t c\u00e1ch c\u00f3 t\u1ed5 ch\u1ee9c v\u00e0 d\u1ec5 nh\u00ecn. Bootstrap gi\u00fap vi\u1ec7c thi\u1ebft k\u1ebf b\u1ea3ng tr\u1edf n\u00ean nh\u1eb9 nh\u00e0ng h\u01a1n nh\u1edd v\u00e0o c\u00e1c class ti\u1ec7n \u00edch \u0111\u01b0\u1ee3c t\u00edch h\u1ee3p s\u1eb5n.&nbsp; \u0110\u1ecdc b\u00e0i vi\u1ebft n\u00e0y \u0111\u1ec3 [&hellip;]<\/p>\n","protected":false},"author":235,"featured_media":88845,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_gspb_post_css":"","footnotes":""},"categories":[109],"tags":[],"class_list":["post-88834","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-chuyen-mon-it"],"blocksy_meta":[],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v26.8 (Yoast SEO v27.7) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Table Bootstrap: Chi ti\u1ebft c\u00e1ch t\u1ea1o v\u00e0 t\u00f9y ch\u1ec9nh b\u1ea3ng v\u1edbi Bootstrap - ITviec Blog<\/title>\n<meta name=\"description\" content=\"H\u1ecdc ngay c\u00e1ch s\u1eed d\u1ee5ng Table trong Bootstrap bao g\u1ed3m t\u1ea1o b\u1ea3ng, \u0111\u1ecbnh d\u1ea1ng, responsive, hi\u1ec7u \u1ee9ng, v\u00e0 b\u00e0i t\u1eadp th\u1ef1c h\u00e0nh chi ti\u1ebft k\u00e8m v\u00ed d\u1ee5.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/itviec.com\/blog\/huong-dan-su-dung-table-bootstrap\/\" \/>\n<meta property=\"og:locale\" content=\"vi_VN\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Table Bootstrap: Chi ti\u1ebft c\u00e1ch t\u1ea1o v\u00e0 t\u00f9y ch\u1ec9nh b\u1ea3ng v\u1edbi Bootstrap\" \/>\n<meta property=\"og:description\" content=\"Trong qu\u00e1 tr\u00ecnh x\u00e2y d\u1ef1ng giao di\u1ec7n web, b\u1ea3ng (table) l\u00e0 c\u00f4ng c\u1ee5 kh\u00f4ng th\u1ec3 thi\u1ebfu \u0111\u1ec3 tr\u00ecnh b\u00e0y d\u1eef li\u1ec7u m\u1ed9t c\u00e1ch c\u00f3 t\u1ed5 ch\u1ee9c v\u00e0 d\u1ec5 nh\u00ecn. Bootstrap gi\u00fap vi\u1ec7c\" \/>\n<meta property=\"og:url\" content=\"https:\/\/itviec.com\/blog\/huong-dan-su-dung-table-bootstrap\/\" \/>\n<meta property=\"og:site_name\" content=\"ITviec Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/ITviec\" \/>\n<meta property=\"article:published_time\" content=\"2025-07-01T09:51:55+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-07-10T04:34:53+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/table-bootstrap-vippro-scaled.png\" \/>\n\t<meta property=\"og:image:width\" content=\"800\" \/>\n\t<meta property=\"og:image:height\" content=\"421\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Ph\u1ea1m H\u1eefu Ng\u1ecdc\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@ITviec\" \/>\n<meta name=\"twitter:site\" content=\"@ITviec\" \/>\n<meta name=\"twitter:label1\" content=\"\u0110\u01b0\u1ee3c vi\u1ebft b\u1edfi\" \/>\n\t<meta name=\"twitter:data1\" content=\"Ph\u1ea1m H\u1eefu Ng\u1ecdc\" \/>\n\t<meta name=\"twitter:label2\" content=\"\u01af\u1edbc t\u00ednh th\u1eddi gian \u0111\u1ecdc\" \/>\n\t<meta name=\"twitter:data2\" content=\"18 ph\u00fat\" \/>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Table Bootstrap: Chi ti\u1ebft c\u00e1ch t\u1ea1o v\u00e0 t\u00f9y ch\u1ec9nh b\u1ea3ng v\u1edbi Bootstrap - ITviec Blog","description":"H\u1ecdc ngay c\u00e1ch s\u1eed d\u1ee5ng Table trong Bootstrap bao g\u1ed3m t\u1ea1o b\u1ea3ng, \u0111\u1ecbnh d\u1ea1ng, responsive, hi\u1ec7u \u1ee9ng, v\u00e0 b\u00e0i t\u1eadp th\u1ef1c h\u00e0nh chi ti\u1ebft k\u00e8m v\u00ed d\u1ee5.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/itviec.com\/blog\/huong-dan-su-dung-table-bootstrap\/","og_locale":"vi_VN","og_type":"article","og_title":"Table Bootstrap: Chi ti\u1ebft c\u00e1ch t\u1ea1o v\u00e0 t\u00f9y ch\u1ec9nh b\u1ea3ng v\u1edbi Bootstrap","og_description":"Trong qu\u00e1 tr\u00ecnh x\u00e2y d\u1ef1ng giao di\u1ec7n web, b\u1ea3ng (table) l\u00e0 c\u00f4ng c\u1ee5 kh\u00f4ng th\u1ec3 thi\u1ebfu \u0111\u1ec3 tr\u00ecnh b\u00e0y d\u1eef li\u1ec7u m\u1ed9t c\u00e1ch c\u00f3 t\u1ed5 ch\u1ee9c v\u00e0 d\u1ec5 nh\u00ecn. Bootstrap gi\u00fap vi\u1ec7c","og_url":"https:\/\/itviec.com\/blog\/huong-dan-su-dung-table-bootstrap\/","og_site_name":"ITviec Blog","article_publisher":"https:\/\/www.facebook.com\/ITviec","article_published_time":"2025-07-01T09:51:55+00:00","article_modified_time":"2025-07-10T04:34:53+00:00","og_image":[{"width":800,"height":421,"url":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/table-bootstrap-vippro-scaled.png","type":"image\/png"}],"author":"Ph\u1ea1m H\u1eefu Ng\u1ecdc","twitter_card":"summary_large_image","twitter_creator":"@ITviec","twitter_site":"@ITviec","twitter_misc":{"\u0110\u01b0\u1ee3c vi\u1ebft b\u1edfi":"Ph\u1ea1m H\u1eefu Ng\u1ecdc","\u01af\u1edbc t\u00ednh th\u1eddi gian \u0111\u1ecdc":"18 ph\u00fat"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/itviec.com\/blog\/huong-dan-su-dung-table-bootstrap\/#article","isPartOf":{"@id":"https:\/\/itviec.com\/blog\/huong-dan-su-dung-table-bootstrap\/"},"author":{"name":"Ph\u1ea1m H\u1eefu Ng\u1ecdc","@id":"https:\/\/itviec.com\/blog\/#\/schema\/person\/407769a7625b7f955cef615f7a99abad"},"headline":"Table Bootstrap: Chi ti\u1ebft c\u00e1ch t\u1ea1o v\u00e0 t\u00f9y ch\u1ec9nh b\u1ea3ng v\u1edbi Bootstrap","datePublished":"2025-07-01T09:51:55+00:00","dateModified":"2025-07-10T04:34:53+00:00","mainEntityOfPage":{"@id":"https:\/\/itviec.com\/blog\/huong-dan-su-dung-table-bootstrap\/"},"wordCount":3707,"publisher":{"@id":"https:\/\/itviec.com\/blog\/#organization"},"image":{"@id":"https:\/\/itviec.com\/blog\/huong-dan-su-dung-table-bootstrap\/#primaryimage"},"thumbnailUrl":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/table-bootstrap-vippro-scaled.png","articleSection":["Chuy\u00ean m\u00f4n IT"],"inLanguage":"vi"},{"@type":"WebPage","@id":"https:\/\/itviec.com\/blog\/huong-dan-su-dung-table-bootstrap\/","url":"https:\/\/itviec.com\/blog\/huong-dan-su-dung-table-bootstrap\/","name":"Table Bootstrap: Chi ti\u1ebft c\u00e1ch t\u1ea1o v\u00e0 t\u00f9y ch\u1ec9nh b\u1ea3ng v\u1edbi Bootstrap - ITviec Blog","isPartOf":{"@id":"https:\/\/itviec.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/itviec.com\/blog\/huong-dan-su-dung-table-bootstrap\/#primaryimage"},"image":{"@id":"https:\/\/itviec.com\/blog\/huong-dan-su-dung-table-bootstrap\/#primaryimage"},"thumbnailUrl":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/table-bootstrap-vippro-scaled.png","datePublished":"2025-07-01T09:51:55+00:00","dateModified":"2025-07-10T04:34:53+00:00","description":"H\u1ecdc ngay c\u00e1ch s\u1eed d\u1ee5ng Table trong Bootstrap bao g\u1ed3m t\u1ea1o b\u1ea3ng, \u0111\u1ecbnh d\u1ea1ng, responsive, hi\u1ec7u \u1ee9ng, v\u00e0 b\u00e0i t\u1eadp th\u1ef1c h\u00e0nh chi ti\u1ebft k\u00e8m v\u00ed d\u1ee5.","breadcrumb":{"@id":"https:\/\/itviec.com\/blog\/huong-dan-su-dung-table-bootstrap\/#breadcrumb"},"inLanguage":"vi","potentialAction":[{"@type":"ReadAction","target":["https:\/\/itviec.com\/blog\/huong-dan-su-dung-table-bootstrap\/"]}]},{"@type":"ImageObject","inLanguage":"vi","@id":"https:\/\/itviec.com\/blog\/huong-dan-su-dung-table-bootstrap\/#primaryimage","url":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/table-bootstrap-vippro-scaled.png","contentUrl":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/table-bootstrap-vippro-scaled.png","width":800,"height":421,"caption":"Table Bootstrap l\u00e0 g\u00ec - itviec blog"},{"@type":"BreadcrumbList","@id":"https:\/\/itviec.com\/blog\/huong-dan-su-dung-table-bootstrap\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Chuy\u00ean m\u00f4n IT","item":"https:\/\/itviec.com\/blog\/chuyen-mon-it\/"},{"@type":"ListItem","position":2,"name":"Table Bootstrap: Chi ti\u1ebft c\u00e1ch t\u1ea1o v\u00e0 t\u00f9y ch\u1ec9nh b\u1ea3ng v\u1edbi Bootstrap"}]},{"@type":"WebSite","@id":"https:\/\/itviec.com\/blog\/#website","url":"https:\/\/itviec.com\/blog\/","name":"ITviec Blog","description":"IT Jobs &amp; People in Vietnam","publisher":{"@id":"https:\/\/itviec.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/itviec.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"vi"},{"@type":"Organization","@id":"https:\/\/itviec.com\/blog\/#organization","name":"ITviec","url":"https:\/\/itviec.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"vi","@id":"https:\/\/itviec.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2018\/12\/itviec-black-square-facebook.png","contentUrl":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2018\/12\/itviec-black-square-facebook.png","width":1800,"height":1800,"caption":"ITviec"},"image":{"@id":"https:\/\/itviec.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/ITviec","https:\/\/x.com\/ITviec","https:\/\/www.linkedin.com\/company\/itviec","https:\/\/www.youtube.com\/channel\/UCYthAQ3bcGr57M_ag5gHDvQ"]},{"@type":"Person","@id":"https:\/\/itviec.com\/blog\/#\/schema\/person\/407769a7625b7f955cef615f7a99abad","name":"Ph\u1ea1m H\u1eefu Ng\u1ecdc","image":{"@type":"ImageObject","inLanguage":"vi","@id":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/03\/Pham-Huu-Ngoc-technical-content-reviewer-e1712135841473-100x100.jpg","url":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/03\/Pham-Huu-Ngoc-technical-content-reviewer-e1712135841473-100x100.jpg","contentUrl":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/03\/Pham-Huu-Ngoc-technical-content-reviewer-e1712135841473-100x100.jpg","caption":"Ph\u1ea1m H\u1eefu Ng\u1ecdc"},"url":"https:\/\/itviec.com\/blog\/author\/pham-huu-ngoc-2\/"}]}},"_links":{"self":[{"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/posts\/88834","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/users\/235"}],"replies":[{"embeddable":true,"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/comments?post=88834"}],"version-history":[{"count":5,"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/posts\/88834\/revisions"}],"predecessor-version":[{"id":89258,"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/posts\/88834\/revisions\/89258"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/media\/88845"}],"wp:attachment":[{"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/media?parent=88834"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/categories?post=88834"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/tags?post=88834"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}