Tạo bảng trong html

NỘI DUNG

1. Ví dụ về một bảng thông thường

Họ tên	Ngày sinh	Giới tính
Trần Anh Đức	03/08/1993	Nam
Kiều Thị Thu Hằng	04/09/1991	Nữ
Vương Thị Lê Na	06/10/1991	Nữ
Dương Kim Thương	16/11/1990	Nam
Mai Đức Hiếu	18/06/1989	Nam

– Ví dụ: Cái bảng bên trái có sáu hàng tương ứng với sáu phần tử <tr>, hàng đầu tiên có ba ô tiêu đề tương ứng với ba phần tử <th>, năm hàng còn lại gồm mười lăm ô bình thường tương ứng với mười lăm phần tử <td>

– Thông thường, để tạo được một cái bảng thì chúng ta cần phải sử dụng bốn loại thẻ:

<table>

<tr>

<th>

<td>

– Trong đó:

Thẻ <table> dùng để xác định một cái bảng.
Thẻ <tr> dùng để xác định một hàng bên trong bảng.
Thẻ <th> dùng để xác định một ô (tiêu đề) bên trong hàng.
Thẻ <td> dùng để xác định một ô (bình thường) bên trong hàng.

Mã nguồn của bảng trên như sau:

<table border="1">
<tbody>
<tr>
   <th>Họ tên</th>
   <th>Ngày sinh</th>
   <th>Giới tính</th>
</tr>
<tr>
   <td>Trần Anh Đức</td>
   <td>03/08/1993</td>
   <td>Nam</td>
</tr>
<tr>
   <td>Kiều Thị Thu Hằng</td>
   <td>04/09/1991</td>
   <td>Nữ</td>
</tr>
<tr>
   <td>Vương Thị Lê Na</td>
   <td>06/10/1991</td>
   <td>Nữ</td>
</tr>
<tr>
   <td>Dương Kim Thương</td>
   <td>16/11/1990</td>
   <td>Nam</td>
</tr>
<tr>
   <td>Mai Đức Hiếu</td>
   <td>18/06/1989</td>
   <td>Nam</td>
</tr>
</tbody>
</table>

2. Cách gộp các ô bên trong bảng lại với nhau

– Thông thường, khi tạo một cái bảng thì số ô trên mỗi hàng phải bằng nhau. Tuy nhiên, có một vài trường hợp đặc biệt, chúng ta cần phải tạo ra những cái bảng mà số ô trên mỗi hàng có sự hơn kém nhau.

Họ tên	Giới tính	Kết quả thi
Họ tên	Giới tính	Toán	Lý	Hóa
Trần Đức Anh	Nam	7.25	8.0	3.75
Mai Đức Hiếu	Nam	7.0	9.0	4.75

– Để làm được điều đó thì chúng ta cần phải gộp các ô lại với nhau.

Gộp các ô theo chiều ngang

– Để gộp các ô theo chiều ngang thì chúng ta đặt thuộc tính colspan vào bên trong thẻ mở của cái ô mà ta muốn bắt đầu gộp nó với những ô nằm phía bên phải.

– Cú pháp:

colspan="số ô muốn gộp theo chiều ngang"

Gộp các ô theo chiều dọc

– Để gộp các ô theo chiều dọc thì chúng ta đặt thuộc tính rowspan vào bên trong thẻ mở của cái ô mà ta muốn bắt đầu gộp nó với những ô nằm phía dưới.

– Cú pháp:

rowspan="số ô muốn gộp theo chiều dọc"

Mã nguồn của bảng trên trong phần gộp ô như sau:

<table border="1">
<tbody>
<tr>
<th rowspan="2">Họ tên</th>
<th rowspan="2">Giới tính</th>
<th colspan="3">Kết quả thi</th>
</tr>
<tr>
<th>Toán</th>
<th>Lý</th>
<th>Hóa</th>
</tr>
<tr>
<td>Trần Đức Anh</td>
<td>Nam</td>
<td>7.25</td>
<td>8.0</td>
<td>3.75</td>
</tr>
<tr>
<td>Mai Đức Hiếu</td>
<td>Nam</td>
<td>7.0</td>
<td>9.0</td>
<td>4.75</td>
</tr>
</tbody>
</table>

3. Một ví dụ khác về gộp ô để rút kinh nghiệm

Nội dung phần đầu trang
Menu điều hướng trang web	Phần nội dung bên phải trang web
Nội dung trong trang web
Nội dung chân trang web

Mã nguồn của bảng trên trong phần gộp ô như sau:

<table border="1">
<tbody>
<tr>
     <td colspan=2>Nội dung phần đầu trang</td>
</tr>
<tr>
    <td width=70%>Menu điều hướng trang web</td>
    <td rowspan=2>Phần nội dung bên phải trang web</td>
</tr>
<tr>
    <td>Nội dung trong trang web</td>
</tr>
<tr>
    <td colspan=3>Nội dung chân trang web</td>
</tr>
</tbody>
</table>

4. Tùy chỉnh đường viền, màu nền cho bảng

Thêm viền cho bảng HTML

Nếu không chỉ định trước, bảng sẽ không có đường viền. Viền của bảng được xác định bằng đặc tính border của CSS.

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

Border Collapse

Nếu muốn khoảng trống giữa các đường viền bị loại bỏ, dùng đặc tính CSS:

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

Cell Padding

Cell Padding dùng để xác định khoảng cách giữa nội dung trong ô tới đường viền. Nếu không chỉ định, ô tới đường viền sẽ không có khoảng trống nào. Để đặt khoảng cách này, dùng đặc tính CSS padding.

th, td { padding: 15px; }

Border Spacing

Border Spacing xác định khoảng cách giữa các ô trong bảng, dùng đặc tính CSS border-spacing để xác định.

table { border-spacing: 5px; }

Thêm Style đặc biệt cho bảng

Để thêm kiểu cách cho bảng, dùng thuộc tính id.

<table id="t01">
<tr>
   <th>Tên</th>
   <th>Họ</th>
  <th>Tuổi</th>
</tr>
<tr>
   <td>Lan</td>
   <td>Phan</td>
   <td>24</td>
</tr>
<tr>
   <td>Hoa</td>
   <td>Phạm</td>
   <td>25</td>
</tr>
</table>

Bây giờ định nghĩa style này.

table#t01 { width: 100%; background-color: #f1f1c1; }

Bổ sung thêm các kiểu cách khác:

table#t01 tr td {border: 1px solid green;}
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; padding: 5px; } 
table#t01 td { padding: 5px; }

Kết quả sau khi tùy chỉnh CSS cho bảng

Tên	Họ	Tuổi
Lan	Phan	24
Hoa	Phạm	25

5. Tạo hiệu ứng khi trỏ chuột vào dòng nào hightlight dòng đó

Sử dụng CSS sau:

table.easy-table {max-width:100%;background-color:transparent;border-collapse:collapse;border-spacing:0;}
.easy-table{width:100%;margin-bottom:18px;}.easy-table th,.easy-table td{padding:8px;line-height:18px;text-align:left;vertical-align:top;border-top:1px solid #dddddd;}
.easy-table th{font-weight:bold;}
.easy-table thead th{vertical-align:bottom;}
.easy-table caption+thead tr:first-child th,.easy-table caption+thead tr:first-child td,.easy-table colgroup+thead tr:first-child th,.easy-table colgroup+thead tr:first-child td,.easy-table thead:first-child tr:first-child th,.easy-table thead:first-child tr:first-child td{border-top:0;}
.easy-table tbody+tbody{border-top:2px solid #dddddd;}
.table-condensed th,.table-condensed td{padding:4px 5px;}
.table-bordered{border:1px solid #dddddd;border-collapse:separate;*border-collapse:collapsed;border-left:0;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;}.table-bordered th,.table-bordered td{border-left:1px solid #dddddd;}
.table-bordered caption+thead tr:first-child th,.table-bordered caption+tbody tr:first-child th,.table-bordered caption+tbody tr:first-child td,.table-bordered colgroup+thead tr:first-child th,.table-bordered colgroup+tbody tr:first-child th,.table-bordered colgroup+tbody tr:first-child td,.table-bordered thead:first-child tr:first-child th,.table-bordered tbody:first-child tr:first-child th,.table-bordered tbody:first-child tr:first-child td{border-top:0;}
.table-bordered thead:first-child tr:first-child th:first-child,.table-bordered tbody:first-child tr:first-child td:first-child{-webkit-border-top-left-radius:4px;border-top-left-radius:4px;-moz-border-radius-topleft:4px;}
.table-bordered thead:first-child tr:first-child th:last-child,.table-bordered tbody:first-child tr:first-child td:last-child{-webkit-border-top-right-radius:4px;border-top-right-radius:4px;-moz-border-radius-topright:4px;}
.table-bordered thead:last-child tr:last-child th:first-child,.table-bordered tbody:last-child tr:last-child td:first-child{-webkit-border-radius:0 0 0 4px;-moz-border-radius:0 0 0 4px;border-radius:0 0 0 4px;-webkit-border-bottom-left-radius:4px;border-bottom-left-radius:4px;-moz-border-radius-bottomleft:4px;}
.table-bordered thead:last-child tr:last-child th:last-child,.table-bordered tbody:last-child tr:last-child td:last-child{-webkit-border-bottom-right-radius:4px;border-bottom-right-radius:4px;-moz-border-radius-bottomright:4px;}
.table-striped tbody tr:nth-child(odd) td,
.table-striped tbody tr:nth-child(odd) th{background-color:#f9f9f9;}
.easy-table tbody tr:hover td,.easy-table tbody tr:hover th{background-color:#f5f5f5;}
table.easy-table caption{
font-weight:bold;
}

Thêm class vào table như sau:

<table class="easy-table">
<tr>
   <th>Tên</th>
   <th>Họ</th>
   <th>Tuổi</th>
</tr>
<tr>
   <td>Lan</td>
   <td>Phan</td>
   <td>24</td>
</tr>
<tr>
   <td>Hoa</td>
   <td>Phạm</td>
   <td>25</td>
</tr>
</table>

Kết quả như sau:

Tên	Họ	Tuổi
Lan	Phan	24
Hoa	Phạm	25

Post Views: 123