NTM Solutions

Chủ Nhật, 4 tháng 12, 2016

Tự học HTML - Bài 12 - Xử lý DẠNG BẢNG

Trong bài này chúng ta sẽ học những phần sau:
  • Dùng thẻ <table> để chèn 01 bảng.
  • Dùng thẻ <tr> để chèn dòng trong bảng.
  • Dùng thẻ <td> để xác định ô chứa dữ liệu trong bảng.
  • Dùng thẻ <th> để chứa dòng tiêu đề của bảng.
  • Dùng thẻ <caption> để chứa phần đầu đề của bảng.
  • Sử dụng thuộc tính CSS border để định dạng đường viền của bảng.
  • Dùng thuộc tính CSS border-collapse tạo đường viền đơn.
  • Dùng thuộc tính CSS padding để thụt lề cho ô.
  • Dùng CSS text-align canh lề cho chữ trong ô.
  • Dùng CSS border-spacing để thiết lập khoảng cách giữa các ô.
  • Dùng thuộc tính colspan để nhập nhiều cột trong 1 ô.
  • Dùng thuộc tính rowspan để nhập nhiều dòng trong 1 ô.
  • Dùng thuộc tính id để gán id cho bảng

Ví dụ về Bảng

Họ tên
Lớp
Môn học
Nguyễn Tèo
TH001
Thổi sáo
Phạm Tí
TH001
Guitar
Lâm Văn Tồ
TH001
Piano
Ngọc Oanh
TH002
Harmonica
Leo
TH003
Trống Canyon
Augusta
TH003
Đàn tỳ bà

01 - Tạo 1 bảng

Trong HTML , tạo 1 bảng ta dùng thẻ <table>
Mỗi dòng bên trong bảng ta tạo bằng thẻ <tr>. Dòng đầu tiên ở mỗi cột xác định bằng thẻ <th>. Mặc định, dòng tiêu đề bảng được in đậm và canh giữa. Mỗi ô trong bảng được tạo bằng thẻ <td>

Ví dụ

<table style="width:100%">
  
<tr>
    
<th>Họ và Tên</th>
    
<th>Lớp</th>
    
<th>Môn học</th>
  
</tr>
  
<tr>
    
<td>Nguyễn Tèo</td>
    
<td>TH001</td>
    
<td>Thổi sáo</td>
  
</tr>
  
<tr>
    
<td>Phạm Tí</td>
    
<td>TH001</td>
    
<td>Guitar</td>
  
</tr>
</table>
Ghi chú: Trong cấu trúc bảng HTML thẻ <td> chứa nội dung của bảng.
Ngoài ra chúng có thể chứa các thẻ khác.

02 - Tạo đường viền cho bảng

Nếu bạn không định thuộc tính đường viềncho bảng, trình duyệt sẽ hiển thị bảng không có đường viền.
Đưuòng viền bảng đưuọc hiển thị qua thuộc tính CSS border:

Ví dụ

table, th, td {
    border
: 1px solid black;
}
Nhớ thiết lập đường viền cho cả bảng và ô.

Collapsed Borders – Đường viền đơn

Tạo đường viền đơn bằng thuộc tính CSS border-collapse:

Ví dụ

table, th, td {
    border
: 1px solid black;
    border-collapse
: collapse;
}

03 - Thụt lề ô

Thuộc tính padding định khoảng cách giữa ô và nội dung của nó.
Nếu ta không thiết lập padding, ô sẽ hiển thị không thụt lề.

Ví dụ

th, td {
    padding
: 15px;
}

04 - Canh lề trái tiêu đề

Mặc định, dòng tiêu đề của bảng được in đậm và canh giữa.
Để canh lề trái cho tiêu đề bảng, dùng CSS text-align:

Ví dụ

th {
    text-align
: left;
}

05 - Thêm khoảng cách giữa các ô

Border-spacing định khoảng cách giữa các ô.

Ví dụ

table {
    border-spacing
: 5px;
}Try it Yourself »
Chú ý: Nếu bảng được tạo đường viền đơn(collapse),thuộc tính border-spacing không có tác dụng.

06 - Nhập chung cột (Merge columns)

Dùng thuộc tính colspan

Ví dụ

<table style="width:100%">
  
<tr>
    
<th>Họ và Tên</th>
    
<th colspan="2">Lớp + Môn học</th>
  
</tr>
  
<tr>
    
<td>Nguyễn Tèo</td>
    
<td>TH001</td>
    
<td>Thổi sáo</td>
  
</tr>
  
<tr>
    
<td>Phạm Tí</td>
    
<td>TH001</td>
    
<td>Guitar</td>
  
</tr>
</table>

07 - Nhập chung dòng(Merge rows)

Dùng thuộc tính rowspan:

Ví dụ

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

08 - Thêm phần Caption

Thêm phần tiêu đề cho bảng, dùng thẻ <caption>:

Ví dụ

<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>Try it Yourself »
Chú ý: Thẻ <caption> phải được thêm ngay sau thẻ <table>

09 - Định kiểu riêng cho 1 bảng

Để định 1 kiểu riêng cho 1 bảng duy nhất,thêm thuộc tính id cho bảng:

Ví dụ

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

Sau đó định kiểu qua các thuộc tính:

table#t01 {
    width
: 100%;
    background-color
: #f1f1c1;
}Try it Yourself »

Và tạo thêm các kiểu khác:


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