Table Align Chuyên đề - Học Web Chuẩn

Trang chủ » Căn Giữa Bảng Html » Table Align Chuyên đề - Học Web Chuẩn

Có thể bạn quan tâm

Chuyên đề
  • Trang chủ
  • Chuyên đề HTML/CSS
  • Table
  • Table align

HỌC WEB CHUẨN

HƯỚNG DẪN HỌC

  • Hướng dẫn học
  • Hướng dẫn học XHTML & HTML5
  • Hướng dẫn học CSS
  • Hướng dẫn học CSS3
  • Hướng dẫn học Responsive
  • Hướng dẫn học ES6
  • Hướng dẫn học React.js
  • Hướng dẫn học jQuery
  • Hướng dẫn học PHP
  • Hướng dẫn học Laravel
  • Hướng dẫn học Wordpress
  • Hướng dẫn học Webpack
  • Hướng dẫn học SCSS

THAM KHẢO

  • Tham khảo
  • Tham khảo HTML4/XHTML
  • Tham khảo HTML5
  • Tham khảo CSS
  • Tham khảo CSS3
  • Tham khảo jQuery

CHUYÊN ĐỀ

Chuyên đề

  • Chuyên đề HTML/CSS (43)
    • Block list (6)
    • List (5)
    • Navigation (5)
    • Pagenation (6)
    • Paragraph (8)
    • Table (7)
    • Tiêu đề (6)
  • Chuyên đề HTML5/CSS3 (20)
    • Border radius (7)
    • Box hover (5)
    • Box shadow (4)
    • Loading (4)
  • Chuyên đề jQuery / JS (15)
    • Form (6)
    • Layout (9)
  • jQuery/JS plugin (16)
    • BiggerLink (3)
    • Fixheight (2)
    • Pie (4)
    • Pop up (3)
    • Tab (2)
    • Tooltips (2)

Nội dung mới nhất

  • Áp dụng thực tế hiệu ứng loading
  • Box hover 2 image
  • Box hover fade
  • box hover slide element
  • Box hover chuyển động thành phần
  • Box hover scale image
  • Loading syle css3 – circle 02
  • Loading syle css3 – circle
  • Loading style css3 – square
  • Box-shadow sử dụng khi hover

Liên kết nhanh

add align biggerlink Block list Border radius box-shadow box hover css3 fixheight form jQuery layout list loading Navigation pa Pagenation paragraph Pie popup tab Table tiêu đề tooltips

GÓP Ý - LIÊN HỆ

  • CÔNG CỤ TẠO CSS3CSS3 GENERATOR
  • BỘ CÔNG CỤGENERATOR TOOLS
  • CÔNG CỤ HỖ TRỢWEB TOOLS
  • CÔNG CỤ TẠO RANDOMRANDOM GENERATOR
  • CÔNG CỤ KIỂM TRA RESPONSIVE TEST
  • CHIA SẺ HAYWEB & TOOLS
  • Follow us on hocwebchuan.com
  • Short URL
  • Rabbie theme
Table align

Trở về

  • 15,293

Muốn canh vị trí tất cả tiêu đề hay nội dung của table, chúng ta sẽ sử dụng các thuộc tính của CSS kèm theo sẽ phát huy hiệu quả cả về mặc SEO và hiệu quả code.

Table – text-align

text-align: giúp canh phần tử table bên trái, bên phải hay ở giữa.

Html viết:

<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Học Web Chuẩn</title> <style> * { /* reset lại margin và padding cho các tag */ margin: 0; padding: 0; } .tableStyle { width: 100%; } .tableStyle td { height: 60px; padding: 10px; } .alignL { text-align: left; } .alignC { text-align: center; } .alignR { text-align: right; } </style> </head> <body> <table class="tableStyle" border="1"> <tr> <td class="alignL">text-align: left</td> <td class="alignC">text-align: center</td> <td class="alignR">text-align: right</td> </tr> </table> </body> </html>

Hiển thị trình duyệt:

Download file để thực hành

Một số ứng dụng của text-align: cho các phần tử table.

Html viết:

<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Học Web Chuẩn</title> <style> * { /* reset lại margin và padding cho các tag */ margin: 0; padding: 0; } .tableStyle { width: 100%; } .tableStyle th, .tableStyle td { padding: 5px; text-align: left; vertical-align: top; } .tableStyle th{ text-align: right; width: 20%; } </style> </head> <body> <table class="tableStyle" border="1"> <tr> <th>Họ và tên</th> <td>Nguyễn Văn A</td> </tr> <tr> <th>Điện thoại</th> <td>0123 456 789</td> </tr> <tr> <th>Kỹ năng</th> <td>HTML<br> XHTML<br> CSS<br> CSS3<br> jQuert</td> </tr> <tr> <th>Sở thích</th> <td>Ăn<br> Ngủ</td> </tr> </table> </body> </html>

Hiển thị trình duyệt:

Table – vertical-align:

vertical-align:: giúp canh phần tử table bên trên, ở giữa, bên dưới.

Html viết:

<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Học Web Chuẩn</title> <style> * { /* reset lại margin và padding cho các tag */ margin: 0; padding: 0; } .tableStyle { width: 100%; } .tableStyle td { height: 60px; padding: 10px; } .vAlignT { vertical-align: top; } .vAlignC { vertical-align: middle; } .vAlignB { vertical-align: bottom; } </style> </head> <body> <table class="tableStyle" border="1"> <tr> <td class="vAlignT">vertical-align: top</td> <td class="vAlignC">vertical-align: middle</td> <td class="vAlignB">vertical-align: bottom</td> </tr> </table> </body> </html>

Hiển thị trình duyệt:

Một số ứng dụng của vertical-align: cho các phần tử table.

Html viết:

<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Học Web Chuẩn</title> <style> * { /* reset lại margin và padding cho các tag */ margin: 0; padding: 0; } .tableStyle { width: 100%; } .tableStyle th, .tableStyle td { padding: 5px; text-align: left; vertical-align: top; } .tableStyle th{ vertical-align: middle; width: 20%; } </style> </head> <body> <table class="tableStyle" border="1"> <tr> <th>Họ và tên</th> <td>Nguyễn Văn A</td> </tr> <tr> <th>Điện thoại</th> <td>0123 456 789</td> </tr> <tr> <th>Kỹ năng</th> <td>HTML<br> XHTML<br> CSS<br> CSS3<br> jQuert</td> </tr> <tr> <th>Sở thích</th> <td>Ăn<br> Ngủ</td> </tr> </table> </body> </html>

Hiển thị trình duyệt:

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Comment

Name *

Email *

Website

Save my name, email, and website in this browser for the next time I comment.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Post navigation

Previous post: colspan và rowspan Next post: Background cho table

Từ khóa » Căn Giữa Bảng Html