This site uses cookies for analytics, personalized content and ads. By continuing to browse this site, you agree to this use.
Author Image Tuesday, 3 April 2018

Season 5: HTML Tutorial



I. HTML Tables


1. Định nghĩa bảng
Bảng trong HTML được định nghĩa bởi thẻ <table>. Trong bảng có các dòng và cột, mỗi dòng là 1 thẻ <tr>, mỗi cột là 1 thẻ <td>. Với dòng đầu tiên của bảng (dòng tiêu đề) bạn có thể sử dụng thẻ <th> thay cho <td>. Dòng tiêu đề sẽ mặc định in đậm và căn giữa

<table style="width:100%">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th> 
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td> 
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td> 
    <td>94</td>
  </tr>
</table>
2. HTML Table - Adding a Border

Nếu không định nghĩa đường viền cho bảng nó sẽ không thể hiển thị. Bạn có thể dùng css để chỉ định viền cho bảng
table, th, td {
    border: 1px solid black;
}

3. HTML Table - Collapsed Borders

Sử dụng border-collapse để thu gọn khoảng cách với mép đường viền
table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
}
4. HTML Table - Adding Cell Padding

Bạn có thể thêm không gian cho mỗi thành phần bằng việc thêm Cell Padding.
th, td {
    padding: 15px;
}
5. HTML Table - Left-align Headings

Để định vị trí tiêu đề sử dụng css text-align
th {
    text-align: left;
}
6. HTML Table - Adding Border Spacing

Sử dụng thuộc tính này để thêm khoảng cách với đường viền
table {
    border-spacing: 5px;
}
7. HTML Table - Cells that Span Many Columns

Đây là thuộc tính giúp chúng ta gộp cột
<table style="width:100%">
  <tr>
    <th>Name</th>
    <th colspan="2">Telephone</th>
  </tr>
  <tr>
    <td>Bill Gates</td>
    <td>55577854</td>
    <td>55577855</td>
  </tr>
</table>
8. HTML Table - Cells that Span Many Rows

Đây là thuộc tính giúp ta gộp dòng
<table style="width:100%">
  <tr>
    <th>Name:</th>
    <td>Bill Gates</td>
  </tr>
  <tr>
    <th rowspan="2">Telephone:</th>
    <td>55577854</td>
  </tr>
  <tr>
    <td>55577855</td>
  </tr>
</table>
9. HTML Table - Adding a Caption 

Để thêm phụ để cho bảng ta dùng thẻ <caption>
<table style="width:100%">
  <caption>Monthly savings</caption>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$50</td>
  </tr>
</table>
10. Chèn css cho bảng bằng cách sử dụng ID
<table id="t01">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th> 
    <th>Age</th>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td> 
    <td>94</td>
  </tr>
</table>

<style>
table#t01 {
    width: 100%; 
    background-color: #f1f1c1;
}
table#t01 tr:nth-child(even) {
    background-color: #eee;
}
table#t01 tr:nth-child(odd) {
    background-color: #fff;
}
table#t01 th {
    color: white;
    background-color: black;
}
</style>

II. HTML Lists


Danh sách trong HTML có 2 loại, danh sách có thử tự và danh sách không có thứ tự

1. Danh sách không có thứ tự

Được quy định bởi thẻ <ul>, mỗi phần tử trong danh sách nằm trong thẻ <li>
<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

Unordered HTML List - Choose List Item Marker


Kiểu đánh dấu danh sách gồm
Value Description
disc Sets the list item marker to a bullet (default)
circle Sets the list item marker to a circle
square Sets the list item marker to a square
none The list items will not be marked

Bạn có thể thay đổi bằng cách thêm thuộc tính css như sau
<ul style="list-style-type:disc">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>
2. Danh sách có thứ tự

Được quy định bởi thẻ <ol>,  mỗi phần tử trong danh sách nằm trong thẻ <li>
<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>;
Ordered HTML List - The Type Attribute

Bạn có thể quy định kiểu đánh thứ tự, như số, chữ, hoặc kí tự la mã

Type Description
type="1" Danh sách được đánh số bắt đầu từ 1 (mặc định)
type="A" Danh sách được đánh số bắt đầu từ A viết hoa
type="a" Danh sách được đánh số bắt đầu từ a viết thường
type="I" Danh sách bắt đầu từ kí tự la mã I viết hoa
type="i" Danh sách bắt đầu từ kí tự la mã i viết thường
<ol type="I">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>
3. Mô tả danh sách - HTML Description Lists

Danh sách mô tả là danh sách các thuật ngữ, kèm theo mô tả của từng thuật ngữ. Thẻ <dl> định nghĩa mô tả một danh sách, <dt> định nghĩa tên và <dd> mô tả cho định nghĩa đó

<dl>
  <dt>Coffee</dt>
  <dd>- black hot drink</dd>
  <dt>Milk</dt>
  <dd>- white cold drink</dd>
</dl>
4. Danh sách lồng nhau

Danh sách lồng nhau được sử dụng rất nhiều trong việc tạo menu đa cấp, theo đó mỗi ul có thể là con của 1 li như sau

<ul>
  <li>Coffee</li>
  <li>Tea
    <ul>
      <li>Black tea</li>
      <li>Green tea</li>
    </ul>
  </li>
  <li>Milk</li>
</ul>
5. Kiểm soát danh sách đếm 

Với danh sách có thứ tự bạn có thể chỉ định được thời điểm đếm bằng thuộc tính start
<ol start="50">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>
6. Tạo danh sách ngang với CSS

Các thuộc tính css sẽ nói kĩ hơn trong phần css, đây là 1 ví dụ đơn giản về tạo menu ngang 1 cấp
<!DOCTYPE html>
<html>
<head>
<style>
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333333;
}

li {
    float: left;
}

li a {
    display: block;
    color: white;
    text-align: center;
    padding: 16px;
    text-decoration: none;
}

li a:hover {
    background-color: #111111;
}
</style>
</head>
<body>

<ul>
  <li><a href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
</ul>

</body>
</html>
Đón đọc các bài viết tiếp theo ...
Comments:
Bạn được tự do bày tỏ quan điểm nhưng nghiêm cấm spam
  • Chèn ảnh theo mẫu [img]link[/img]
  • Chèn video Youtube theo mẫu [youtube]link[/youtube]
  • Chèn code theo mẫu [pre]code[/pre]. Lưu ý: mã hóa code trước khi bình luận

  • Please wait while i am loading Facebook SDK js