CSS Tables

Xin chào các bạn, hôm nay mình với các bạn sẽ cùng nhau tìm hiểu tiếp về các thuộc tính định dạng tables trong CSS.

Với các thuộc tính của CSS bạn có thể tạo ra được những tables theo ý muốn của mình. Điển hình như tables dưới đây.

Tạo bảng bằng css tables

Tạo bảng bằng css tables

Table Borders

Để tạo được đường viền cho bảng các bạn cần sử dụng thuộc tính border.

Ta sẽ có ví dụ như sau:

Mã HTML

<h2>tạo viền cho bảng mẫu:</h2>
	<table>
		<tr>
			<th>Firstname</th>
			<th>Lastname</th>
		</tr>
		<tr>
			<td>Peter</td>
			<td>Griffin</td>
		</tr>
		<tr>
			<td>Lois</td>
			<td>Griffin</td>
		</tr>
       </table>

 

Thuộc tính CSS

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

 

Hiển thị chương trình

tạo viền cho bảng mẫu bằng css tables

tạo viền cho bảng mẫu bằng css tables

Chỉnh sửa và loại bỏ các đường viền thừa

Sau khi ta thiết lập đường viền cho bảng bằng thuộc tính border ở bảng sẽ có đường viền kép (Bởi mỗi phần tử: table, th, td đều có 1 đường viền riêng).

Để loại bỏ được các đường viền dư thừa, ta có thể sử dụng thuộc tính border-collapse với giá trị là collapse.

Cú pháp:

 border-collapse: collapse;

Dưới đây sẽ là minh họa cho việc sử dựng thuộc tính border-collapse để loại bỏ đi những đường viền bị dư thừa.

sử dụng border-collapse trong css tables

sử dụng border-collapse trong css tables

Ví dụ hướng dẫn:

Hiển thị chương trình

Như chúng ta đã thấy sau khi đã sử dụng thuộc tính border-collapse  thì những điền viền dư thừa đã ko còn xuất hiện nữa.

Thiết kế kích thước cho bảng mẫu

Thiết lập kích thước bảng

Ta sẽ dùng thuộc tính width và height dùng để thiết lập chiều rộng và chiều cao cho các phần tử của bảng.

Giá trị thuộc tính width, height có thể xác định theo đơn vị: px, hoặc %.

Để thiết lập kích thước cho bảng ta sẽ sử dựng thuộc tính width, height cho phần tử <table>

Cú pháp:

table{
    width:giá trị(%);
    height:giá trị(px);
}

ví dụ:

ví dụ về tạo bảng bằng css tables

ví dụ về tạo bảng bằng css tables

Hiển thị

hiện thí bảng css tables

hiện thí bảng css tables

phân tích: chiều rộng của bảng sẽ chiếm 100% kích thước của thân body. Chiều cao của bảng sẽ chiếm đúng 100px.

Thiết kế kích thước mỗi ô

Để thiết lập kích thước mỗi ô, ta thiết lập giá trị của thuộc tính width và height cho phần tử <th>, <td>

Ví dụ: Phần tử <th> bên trái của bảng dưới đây được thiết lập chiều rộng là 60% và chiều cao là 100px, phần tử <th> bên phải được thiết lập chiều rộng là 40%.

thiết kế kích thước mỗi ô bằng css tables

thiết kế kích thước mỗi ô bằng css tables

Hiển thi chương trình

hiện thị kết quả

hiện thị kết quả

Căn giữa cho các ô trong bảng

cú pháp

td{
    text-align: center;
}

Các bạn có thể dùng cú pháp trên để căn giữa cho các phần tử trong ô của bảng. Để hiểu rõ hơn chúng ta hãy cùng đến với ví dụ dưới đây:

tạo bảng với css tables

tạo bảng với css tables

Hiển thị

hiện thị bảng

hiện thị bảng

Như các bạn đã thấy ở trên sau khi sử dụng thuộc tính text-align:center thì tất cả những nội dung trong thẻ <td> đều tự động căn ra chính giữa của ô.

Bạn có thể tham khảo

Lời kết

Chúng ta đã cùng với nhau tìm hiểu qua về cách tạo một tables bằng các thuộc tính CSS. Mình tin rằng sau bài viết này các bạn có thể tự tạo cho mình những các Table khác nhau để phục vụ cho bản thân mình. Thân ái chào các bạn chúc các bạn có 1 ngày học tập và lm việc hiệu quả.

Bạn có thể xem thêm các bài viết hay và bổ íc hơn tại debug1s.com.

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *