{"id":10873,"date":"2013-07-12T09:57:00","date_gmt":"2013-07-12T09:57:00","guid":{"rendered":"https:\/\/kiencang.net\/2013\/07\/12\/cach-dung-the-table-trong-html-hang-nao-loi-day\/"},"modified":"2022-08-20T21:38:25","modified_gmt":"2022-08-20T14:38:25","slug":"the-table-trong-html","status":"publish","type":"post","link":"https:\/\/kiencang.net\/the-table-trong-html\/","title":{"rendered":"C\u00e1ch d\u00f9ng th\u1ebb table trong HTML – h\u00e0ng n\u00e0o l\u1ed1i \u0111\u1ea5y…"},"content":{"rendered":"\n

Th\u1ebb <table><\/em> l\u00e0 m\u1ed9t trong c\u00e1c th\u1ebb ph\u1ed5 bi\u1ebfn c\u1ee7a HTML, n\u00f3 hay \u0111\u01b0\u1ee3c d\u00f9ng \u0111\u1ec3 t\u1ea1o ra c\u00e1c h\u00e0ng v\u00e0 c\u1ed9t d\u1eef li\u1ec7u c\u00f3 li\u00ean h\u1ec7 v\u1edbi nhau. N\u1ebfu t\u1eebng bi\u1ebft \u0111\u1ebfn Excel th\u00ec ch\u1eafc ch\u1eafn b\u1ea1n c\u0169ng kh\u00f4ng l\u1ea1 g\u00ec kh\u00e1i ni\u1ec7m b\u1ea3ng (table).<\/p>\n\n\n\n

\u0110\u00e2y l\u00e0 m\u1ed9t v\u00ed d\u1ee5 v\u1ec1 b\u1ea3ng:<\/p>\n\n\n\n

H\u1ecd t\u00ean<\/td>Tu\u1ed5i<\/td>Qu\u00ea qu\u00e1n<\/td><\/tr>
Nguy\u1ec5n \u0110\u1ee9c Anh<\/td>26<\/td>H\u00e0 N\u1ed9i<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
\n\n\n\n

Code m\u1eabu cho b\u1ea3ng tr\u00ean:<\/u><\/p>\n\n\n\n

<table border=\"1\">\n<tr>\n  <td>H\u1ecd t\u00ean<\/td>\n  <td>Tu\u1ed5i<\/td>\n  <td>Qu\u00ea qu\u00e1n<\/td>\n<\/tr>\n<tr>\n  <td>Nguy\u1ec5n \u0110\u1ee9c Anh<\/td>\n  <td>26<\/td>\n  <td>H\u00e0 N\u1ed9i<\/td>\n<\/tr>\n<\/table><\/code><\/pre>\n\n\n\n
  1. B\u1ea3ng b\u1eaft \u0111\u1ea7u b\u1eb1ng th\u1ebb m\u1edf <table> v\u00e0 k\u1ebft th\u00fac b\u1eb1ng th\u1ebb \u0111\u00f3ng <\/table><\/li>
  2. <tr> l\u00e0 vi\u1ebft t\u1eaft c\u1ee7a table row<\/i>, n\u00f3 c\u00f3 ngh\u0129a l\u00e0 h\u00e0ng c\u1ee7a b\u1ea3ng. Trong v\u00ed d\u1ee5 tr\u00ean: Nguy\u1ec5n \u0110\u1ee9c Anh, 26, H\u00e0 N\u1ed9i ch\u00ednh l\u00e0 m\u1ed9t h\u00e0ng, v\u00e0 b\u1ea1n c\u00f3 th\u1ec3 th\u1ea5y t\u1ea5t c\u1ea3 d\u1eef li\u1ec7u n\u00e0y n\u1eb1m trong c\u1eb7p th\u1ebb <tr><\/a><\/li>
  3. <td> l\u00e0 vi\u1ebft t\u1eaft c\u1ee7a table data<\/i>, n\u00f3 c\u00f3 ngh\u0129a l\u00e0 c\u00e1c \u0111\u01a1n v\u1ecb d\u1eef li\u1ec7u c\u1ea3 b\u1ea3ng. \u1ede trong v\u00ed d\u1ee5 tr\u00ean Nguy\u1ec5n \u0110\u1ee9c Anh ch\u00ednh l\u00e0 m\u1ed9t table data v\u00e0 d\u1eef li\u1ec7u n\u00e0y \u0111\u01b0\u1ee3c \u0111\u00e1nh d\u1ea5u b\u1eb1ng c\u1eb7p th\u1ebb <td><\/a>. T\u01b0\u01a1ng t\u1ef1 nh\u01b0 v\u1eady th\u00ec 26 v\u00e0 H\u00e0 N\u1ed9i c\u0169ng l\u00e0 m\u1ed9t table data.<\/li>
  4. Gi\u1eefa 2 c\u1eb7p th\u1ebb <td> c\u00f3 th\u1ec3 l\u00e0 v\u0103n b\u1ea3n, li\u00ean k\u1ebft, \u1ea3nh, danh s\u00e1ch ho\u1eb7c form…<\/li>
  5. H\u00e0ng th\u00ec bao g\u1ed3m c\u00e1c \u0111\u01a1n v\u1ecb d\u1eef li\u1ec7u, do v\u1eady c\u1eb7p th\u1ebb h\u00e0ng <tr> s\u1ebd bao l\u1ea5y c\u00e1c c\u1eb7p th\u1ebb d\u1eef li\u1ec7u <td>. B\u1ea3ng th\u00ec g\u1ed3m nhi\u1ec1u h\u00e0ng cho n\u00ean c\u1eb7p th\u1ebb b\u1ea3ng <table> s\u1ebd bao l\u1ea5y c\u00e1c th\u1ebb h\u00e0ng <tr><\/li>
  6. border=”1″ d\u00f9ng \u0111\u1ec3 t\u1ea1o c\u00e1c \u0111\u01b0\u1eddng vi\u1ec1n<\/a> cho b\u1ea3ng, n\u1ebfu kh\u00f4ng c\u00f3 n\u00f3 s\u1ebd kh\u00f3 nh\u00ecn.<\/li><\/ol>\n\n\n\n
    \n\n\n\n
    Khi b\u1ea1n h\u1ecdc s\u00e2u h\u01a1n v\u1ec1 b\u1ea3ng, b\u1ea1n s\u1ebd th\u1ea5y, code m\u1eabu \u1edf tr\u00ean v\u1eabn ch\u01b0a ho\u00e0n to\u00e0n chu\u1ea9n. H\u1ecd t\u00ean, tu\u1ed5i v\u00e0 qu\u00ea qu\u00e1n \u0111\u00fang l\u00e0 m\u1ed9t h\u00e0ng r\u1ed3i, tuy nhi\u00ean b\u1ea1n c\u00f3 th\u1ea5y t\u1eebng c\u00e1i ch\u00ednh l\u00e0 t\u00ean t\u01b0\u01a1ng \u1ee9ng c\u1ee7a m\u1ed9t tr\u01b0\u1eddng d\u1eef li\u1ec7u?<\/p>\n\n\n\n
    S\u1ebd c\u00f3 r\u1ea5t nhi\u1ec1u c\u00e1i t\u00ean kh\u00e1c gi\u1ed1ng nh\u01b0 Nguy\u1ec5n \u0110\u1ee9c Anh n\u1eb1m trong tr\u01b0\u1eddng d\u1eef li\u1ec7u H\u1ecd t\u00ean, nhi\u1ec1u t\u1ec9nh th\u00e0nh kh\u00e1c s\u1ebd n\u1eb1m trong tr\u01b0\u1eddng d\u1eef li\u1ec7u Qu\u00ea qu\u00e1n. Do v\u1eady thay v\u00ec \u0111\u1ec3 H\u1ecd t\u00ean, Tu\u1ed5i v\u00e0 Qu\u00ea qu\u00e1n t\u1eebng c\u00e1i n\u1eb1m trong c\u1eb7p th\u1ebb <td> th\u00ec ng\u01b0\u1eddi ta \u0111\u1eb7t n\u00f3 trong c\u1eb7p th\u1ebb <th> \u2013  l\u00e0 ch\u1eef vi\u1ebft t\u1eaft c\u1ee7a table header, c\u00f2n \u0111\u01b0\u1ee3c g\u1ecdi l\u00e0 c\u00e1c th\u00f4ng tin ti\u00eau \u0111\u1ec1 c\u1ee7a b\u1ea3ng.<\/p>\n\n\n\n
    Code chu\u1ea9n h\u01a1n cho b\u1ea3ng:<\/p>\n\n\n\n
    <table border=\u201d1\u2033>\n<tr>\n  <th>H\u1ecd t\u00ean<\/th>\n  <th>Tu\u1ed5i<\/th>\n  <th>Qu\u00ea qu\u00e1n<\/th>\n<\/tr>\n<tr>\n  <td>Nguy\u1ec5n \u0110\u1ee9c Anh<\/td>\n  <td>26<\/td>\n  <td>H\u00e0 N\u1ed9i<\/td>\n<\/tr>\n<\/table><\/code><\/pre>\n\n\n\n
    V\u00e0 \u0111\u00e2y l\u00e0 k\u1ebft qu\u1ea3:<\/p>\n\n\n\n
    H\u1ecd t\u00ean<\/th>Tu\u1ed5i<\/th>Qu\u00ea qu\u00e1n<\/th><\/tr>
    Nguy\u1ec5n \u0110\u1ee9c Anh<\/td>26<\/td>H\u00e0 N\u1ed9i<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
    \n\n\n\n
    1. Theo m\u1eb7c \u0111\u1ecbnh th\u00ec v\u0103n b\u1ea3n n\u1eb1m trong c\u1eb7p th\u1ebb <t<\/a>h<\/a>><\/a> \u0111\u01b0\u1ee3c b\u00f4i \u0111\u1eadm v\u00e0 c\u0103n gi\u1eefa, c\u00f2n v\u0103n b\u1ea3n n\u1eb1m trong c\u1eb7p th\u1ebb <td> l\u00e0 ch\u1eef th\u01b0\u1eddng v\u00e0 c\u0103n tr\u00e1i.<\/li>
    2. C\u1ea3 th\u1ebb <th> v\u00e0 th\u1ebb <td> \u0111\u1ec1u n\u1eb1m trong c\u1eb7p th\u1ebb <tr><\/li>
    3. B\u1ea1n c\u00f3 th\u1ec3 h\u1ecfi <th> v\u00e0 <td> kh\u00e1c nhau \u1edf ch\u1ed7 n\u00e0o. C\u00e2u tr\u1ea3 l\u1eddi l\u00e0 <td> d\u00f9ng \u0111\u1ec3 \u0111\u00e1nh d\u1ea5u \u0111\u01a1n v\u1ecb d\u1eef li\u1ec7u c\u1ee5 th\u1ec3 n\u00e0o \u0111\u1ea5y, c\u00f2n <th> l\u00e0 th\u00f4ng tin ti\u00eau \u0111\u1ec1 chung cho m\u1ed9t nh\u00f3m c\u00e1c \u0111\u01a1n v\u1ecb d\u1eef li\u1ec7u.<\/li><\/ol>\n\n\n\n
      B\u00e2y gi\u1edd b\u1ea1n h\u00e3y nh\u00ecn b\u1ea3ng sau:<\/p>\n\n\n\n
      \n\n\n\n\n
      \u0110\u1ed9i 1<\/caption>\n
      H\u1ecd t\u00ean<\/th>\nTu\u1ed5i<\/th>\nQu\u00ea qu\u00e1n<\/th>\n<\/tr>\n
      Nguy\u1ec5n \u0110\u1ee9c Anh<\/td>\n26<\/td>\nH\u00e0 N\u1ed9i<\/td>\n<\/tr>\n
      Ho\u00e0ng V\u0103n Th\u00e1i<\/td>\n24<\/td>\nNam \u0110\u1ecbnh<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n\n\n\n
      B\u1ea1n c\u00f3 th\u1ea5y s\u1ef1 kh\u00e1c bi\u1ec7t kh\u00f4ng, gi\u1edd b\u1ea3ng \u0111\u00e3 c\u00f3 th\u00eam m\u1ed9t h\u00e0ng d\u1eef li\u1ec7u, nh\u01b0ng \u0111i\u1ec1u quan tr\u1ecdng h\u01a1n m\u00e0 t\u00f4i mu\u1ed1n nh\u1ea5n m\u1ea1nh l\u00e0 ch\u1eef “\u0110\u1ed9i 1” – \u0111\u00e2y l\u00e0 th\u00f4ng tin ch\u00fa th\u00edch cho b\u1ea3ng.<\/p>\n\n\n\n
      Code m\u1eabu c\u1ee7a b\u1ea3ng \u0110\u1ed9i 1:<\/u><\/p>\n\n\n\n
      <table border=\"1\">\n<caption>\u0110\u1ed9i 1<\/caption>\n<tr>\n  <th>H\u1ecd t\u00ean<\/th>\n  <th>Tu\u1ed5i<\/th>\n  <th>Qu\u00ea qu\u00e1n<\/th>\n<\/tr>\n<tr>\n  <td>Nguy\u1ec5n \u0110\u1ee9c Anh<\/td>\n  <td>26<\/td>\n  <td>H\u00e0 N\u1ed9i<\/td><\/tr>\n<tr>\n  <td>Ho\u00e0ng V\u0103n Th\u00e1i<\/td>\n  <td>24<\/td>\n  <td>Nam \u0110\u1ecbnh<\/td><\/tr>\n<\/table><\/code><\/pre>\n\n\n\n