Khóa 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à

Try it Yourself »

---

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.

Đường viền bảng đượ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;
}

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>

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

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

Tác giả: #drM

Nguồn: Sưu Tầm