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>

DEMO

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;
}

DEMO

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;
}

DEMO

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;
}

DEMO

5. HTML Table - Left-align Headings

Để định vị trí tiêu đề sử dụng css text-align

th {
    text-align: left;
}

DEMO

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;
}

DEMO

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>

DEMO

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>

DEMO

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>

DEMO

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>

DEMO

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>

DEMO

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>

DEMO

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>;

DEMO

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>

DEMO

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>

DEMO

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>

DEMO

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>

DEMO

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>

DEMO

Đón đọc các bài viết tiếp theo ...

Try Web Editor Online Here