KHỞI NGUỒN: TẠO BẢNG KẺ TRONG BLOGSPOT

TẠO BẢNG KẺ Ô

Đây là một đoạn code cho cái bảng bên dưới.

Một vài thuật ngữ bạn cần chú ý trong đoạn code này là:
Kích cỡ bảng: with các bạn có thể chỉnh nhỏ hơn
Đường kẻ khung: table border
Màu nền: background-color (màu trắng là #ffffff, màu đen là #000000)
Nơi bạn đánh text: Table Cell
Số cột và số dòng:
Cột là code này

Dòng là code này

nơi bạn đánh text

Nếu
muốn thêm dòng hay cột thì bạn chỉ cần copy và dán thêm thôi, còn nếu

Trong Word, table được tạo nên bởi hàng và cột thì trong HTML table cũng được tạo nên khi có 2 yếu tố đó. Trước đây, khi lập trình web, đa số đều sử dụng table để dàn trang vì dễ và tính hiệu quả của nó tương đối ổn. Ở Blogspot, không có nút như Word để tạo bảng nhanh, vì vậy, vì đặc thù công việc thì việc nhớ code tạo bảng sẽ rất có ích.

Cú pháp:
<table>...</table>
- Mỗi dòng trong bảng được tạo ra bởi thẻ <tr>...</tr>
- Mỗi ô được định nghĩa bởi thẻ <td>...</td>
- Tiêu đề của dòng hoặc cột được định nghĩa bởi thẻ <th>...</th>

* Dữ liệu trong các ô có thể là hình ảnh, âm thanh, văn bản, hoặc cũng có thể chứa một bảng khác.

Mình xét một ví dụ:

<table border="1">

<tr><!-- dòng 1 -->

      <td>Buổi</td> <!-- ô 1-->

      <th>Sáng</th>

      <th>Chiều</th>

      <th>Tối</th>

</tr>

<tr><!-- dòng 2 -->

      <th>Công việc</th>

      <td>Đi học</td>

      <td>Học tiếng anh</td>

      <td>Làm bài tập</td>

</tr>

</table>

Buổi	Sáng	Chiều	Tối
Công việc	Đi học	Học tiếng anh	Làm bài tập

Nhìn vào bảng hiển thị, các bạn có thể sẽ rõ hơn chức năng của từng thẻ trong bảng, tuy nhiên vẫn còn những thuộc tính chúng ta cần nắm:
Thẻ <TABLE> bao gồm các thuộc tính:

· border : xác định độ dày đường kẻ bảng, như ví dụ trên là 1px.

· align : dùng để căn lề, có 3 giá trị: left, center, right. Không hỗ trợ trong HTML5

· background: xác định ảnh nền.

· bgcolor : xác định màu nền.Không hỗ trợ trong HTML5

· height, width : xác định chiều cao và độ rộng bảng, giá trị có thể là px(pixels) hoặc %.

· cellspacing : xác định khoảng cách giữa các ô. Không hỗ trợ trong HTML5

· cellpadding: xác định khoảng cách giữa dữ liệu trong ô và các cạnh của ô.Không hỗ trợ trong HTML5

>>Xem ví dụ về <TABLE>

Trong thẻ table có các thẻ con cấu thành nó, bao gồm:
Thẻ <TR> : (Table Rows): tạo ra các dòng cho bảng.

*Thuộc tính:

· align: căn lề cho các ô trong cùng một dòng. Không hỗ trợ trong HTML5.

· valign: căn lề theo chiều dọc. có các giá trị : "top" - trên ; "middle" - trung tâm ; "bottom" - dưới.; "baseline" - viết cách trên 1 dòng cơ bản. Không hỗ trợ trong HTML5.

· bgcolor: xác định màu nền cho dòng. Không hỗ trợ trong HTML5.

>>Xem ví dụ về <TR>

Thẻ <TH> : (Table Heading cell) - Tạo tiêu đề cho 1 ô hoặc 1 dòng.
Thẻ <TD> : (Table Data) - Tạo 1 ô dữ liệu.

* Thuộc tính:

· align, valign: căn lề cho dữ liệu theo chiều ngang, chiều dọc. Không hỗ trợ trong HTML5.

· background, bgcolor: xác định ảnh nền, màu nền cho ô dữ liệu. Không hỗ trợ trong HTML5.

· height, width: xác định chiều cao, chiều dài của ô. Không hỗ trợ trong HTML5.

· rowspan: xác định phạm vi mở rộng của ô theo hàng. Không hỗ trợ trong HTML5.

· colspan: xác định phạm vi mở rộng của ô theo cột. Không hỗ trợ trong HTML5.

>> Xem ví dụ về <TH><TD>

Hiện nay, thẻ table còn có các thẻ con quy định vị trí của từng phần trong bảng:
<thead> : quy định dữ liệu sẽ luôn ở trên cùng của bảng, thường làm tiêu đề của cột.
<tbody>: quy định dữ liệu phần giữa bảng, sau thẻ </thead>
<tfoot>: quy định dữ liệu cuối bảng.

* Thuộc tính:

· align, valign: căn lề cho dữ liệu theo chiều ngang, chiều dọc. Không hỗ trợ trong HTML5.

· background, bgcolor: xác định ảnh nền, màu nền cho phần tử bảng. Không hỗ trợ trong HTML5.

· height, width: xác định chiều cao, chiều dài của phần tử bảng. Không hỗ trợ trong HTML5.

Để phân biệt các thẻ này, trình duyệt tự động tạo ra đường viền lớn hơn giao giữa 3 phần và đặc biệt, dù bạn có sắp xếp lộn xộn các thẻ này cho nhau thì trình duyệt sẽ vẫn hiện đúng

Demo Table tag - Thẻ tạo bảng trong HTML

<TABLE> TAG HTML

Mặc định căn lề trái:

Buổi	Sáng	Chiều	Tối
Công việc	Đi học	Học tiếng anh	Làm bài tập

Căn giữa: thêm thuộc tính align="center", để căn phải bạn sửa lại thành : align="right".

Buổi	Sáng	Chiều	Tối
Công việc	Đi học	Học tiếng anh	Làm bài tập

Căn phải + background:

Buổi	Sáng	Chiều	Tối
Công việc	Đi học	Học tiếng anh	Làm bài tập

- Thuộc tính bgcolor: xác định màu nền của bảng
- Thuộc tính hight và width xác định chiều cao và độ rộng của bảng:

Buổi	Sáng	Chiều	Tối
Công việc	Đi học	Học tiếng anh	Làm bài tập

- Thuộc tính cellspacing xác định khoảng cách giữa các ô - Thuộc tính cellpadding xác định khoảng cách giữa dữ liệu và các cạnh của ô:

Buổi	Sáng	Chiều	Tối
Công việc	Đi học	Học tiếng anh	Làm bài tập

Thẻ <TR>:

Tháng	Chi tiêu
Tháng 1 valign="top"	1 triệu VNĐ
Tháng 2 valign="bottom"	1,5 triệu VNĐ
Tháng 3 align="right" bgcolor="yellow"	800.000 VNĐ

Thẻ <TH>, <TD>

Thống kê chi tiêu
Tháng	Chi tiêu
Tháng 1 valign="top"	1 triệu VNĐ
Tháng 2 valign="bottom"	1,5 triệu VNĐ
Tháng 3 valign="baseline"	800.000 VNĐ

Thẻ <thead> ; <tbody> và <tfoot>

Code

Hiển thị

<table border="1">

<thead>

<tr>
<th>Tháng</th>
<th>Chi tiêu</th>
</tr>
</thead>

<tfoot>
<tr>
<td>Tổng</td>
<td>2,5 triệu VNĐ</td>
</tr>
</tfoot>

<tbody>
<tr>
<td>Tháng 1</td>
<td>1 triệu VNĐ</td>
</tr>
<tr>
<td>Tháng 2</td>
<td>1,5 triệu</td>
</tr>
</tbody>

</table>

Tháng <thead>	Chi tiêu
Tổng <tfoot>	2,5 triệu VNĐ