Kiểu cho bảng CSS. Căn chỉnh nội dung ô. Đường viền và khung

Thiết kế bảng với sử dụng CSS- nghề nghiệp thú vị và có trách nhiệm. Bạn cần tiếp cận vấn đề này một cách thành thạo, với kiến thức về tất cả các khả năng của phong cách. Ngoài ra, bạn cần có gu thẩm mỹ để không làm mất lòng khách truy cập bằng sự sáng tạo của mình.

Hầu hết mọi thứ đều có thể được chuyển đổi trong bảng. Thiết kế đẹp Các bảng CSS liên quan đến việc sử dụng thiết kế đường viền, nền bảng, nền ô, khoảng cách giữa chúng và hơn thế nữa. Hãy nhìn vào những điều cơ bản nhất.

Đường viền bảng

Việc tạo kiểu bảng CSS luôn liên quan đến việc chơi đùa với đường viền (border). Theo mặc định, tất cả các bảng không được bao quanh bởi đường viền. Tức là nó bằng 0 pixel. Nhưng điều này có thể được khắc phục bằng cách sử dụng thuộc tính border.

Bạn có thể chỉ định khung bên ngoài cho toàn bộ bảng:

bảng (viền: 3px màu đen; )

Nhờ dòng này, tất cả các bảng trên trang web sử dụng kiểu này sẽ có viền đen. Lưu ý chỉ viền xung quanh các cạnh chứ không viền bên trong bảng. Đối với các ô và hàng, khung được đặt khác nhau.

th, td (viền: 3px màu đen;)

Bạn có thể chỉ định bất kỳ độ dày và màu sắc. Hãy nhớ rằng đường viền không được nhân đôi khi các ô được nối với nhau.

Từ vững chắc có nghĩa là thiết kế liên tục. Bạn có thể chỉ định các giá trị khác.

Thông thường, khung vững chắc được sử dụng vì nó trông hấp dẫn hơn và không làm phân tán sự chú ý khỏi nội dung chính của trang web.

Thuộc tính đường viền cũng có thể được chỉ định theo hướng. Đường viền chỉ có thể được đặt cho phần trên, dưới, bên trái hoặc bên phải. Bởi vì trong một số trường hợp, tùy chọn có khung cho toàn bộ bảng cùng một lúc là không phù hợp.

bảng (đường viền trên cùng: 1px màu đỏ đậm; )

Bằng cách này, bạn chỉ có thể đặt đường viền cho phần trên cùng của bảng. Tương tự như vậy đối với bất kỳ mặt nào khác, thay vì trên, chúng ta viết: phải, trái hoặc dưới.

Tiêu đề bảng

Tiêu đề bảng có thể được chỉ định bằng thẻ . Thẻ này có thể có nhiều thuộc tính trong CSS để biết thêm tinh chỉnh. Điểm hay của việc tạo kiểu bảng trong CSS là bạn có thể điều khiển các phần tử theo cách bạn muốn.

Tiêu đề này được hiển thị giống như tiêu chuẩn trong sách (ví dụ: "Bảng 1").

Bạn cũng có thể chỉ định vị trí của tiêu đề này bằng thuộc tính bên chú thích (trên cùng hoặc dưới cùng). Căn trái hoặc phải được chỉ định bởi thuộc tính text-align.

Nền bảng

Nền của bảng có thể là bất kỳ màu sắc hoặc hoa văn nào. Màu sắc được xác định bởi thuộc tính màu nền. Tên của các thuộc tính hoàn toàn tương ứng với những thuộc tính được sử dụng trong lời nói. Điều này làm cho việc ghi nhớ dễ dàng hơn nhiều.

Màu sắc có thể được chỉ định bằng tên hoặc mã hóa khác nhau. Ngoài ra, bạn có thể chỉ định những điều sau:

Minh bạch - yếu tố minh bạch.
Kế thừa - màu sắc giống như phần tử cha.
Giá trị ban đầu - mặc định.

Tùy chọn trong suốt có thể được sử dụng trong trường hợp tất cả các bảng trong văn bản trong tệp CSS được thiết kế cùng màu, nhưng có cùng màu. trong trường hợp này không có nhu cầu như vậy.

Ngoài ra, nền có thể là một hình ảnh. Để thực hiện việc này, thuộc tính hình nền được chỉ định trong tệp style. Đường dẫn được chỉ định như thế này:

Đường dẫn đến tệp có thể là tương đối hoặc tuyệt đối.

Việc tô màu phức tạp hơn có thể được thực hiện bằng cách sử dụng gradient:

gradient tuyến tính();
radial-gradient();
lặp lại-tuyến tính-gradient() và lặp lại-radial-gradient() - lặp lại độ dốc.

Nền tế bào

Ngoài toàn bộ nền, bạn có thể đặt nền xen kẽ theo cột hoặc hàng. Thuộc tính này được sử dụng rất thường xuyên trong thiết kế, vì sự phân tách trực quan của các dòng giúp thông tin dễ đọc hơn.

Ngoài việc luân phiên, bạn cũng có thể chỉ định số lượng của một cột hoặc hàng cụ thể. Ví dụ như thế này:

tr:nth-child (chẵn) ( ... ) - dấu hiệu của sự xen kẽ dòng;
tr:nth-child (1) ( ... ) - cho biết thuộc tính của một hàng cụ thể;
td:nth-child (chẵn) ( ... ) - biểu thị sự xen kẽ của các cột;
td:nth-child (1) ( ... ) - cho biết thuộc tính của một cột cụ thể.

Ngoài sự luân phiên và các số, bạn có thể chỉ định số đầu tiên (td:con đầu) hoặc số cuối (td:con cuối).

Khoảng cách giữa các ô

Trong CSS, kiểu dáng bảng cho phép bạn xóa khoảng trắng giữa các ô. Theo mặc định là như vậy. Ví dụ: nếu bạn đặt khung trong bảng mà không đặt khoảng cách giữa các đường viền, bạn sẽ nhận được kết quả như sau.

Đồng ý, nó trông không đẹp lắm và không thuận tiện cho việc đọc. Người dùng sẽ có gợn sóng trong mắt vì điều này. Bạn có thể xóa những khoảng trống này bằng cách viết dòng sau theo kiểu bảng:

sụp đổ biên giới: sụp đổ

Nhưng ngược lại, điều đó cũng xảy ra là khoảng cách cần phải tăng lên. Hơn nữa, kích thước của khoảng trống có thể được chỉ định cả giữa các cột và giữa các hàng. Để thực hiện việc này, hãy chỉ định giá trị sau (thay vì thu gọn):

thu gọn đường viền:riêng biệt

Nhưng hành động này sẽ chỉ ra rằng các ô cần được phân chia. Cách chính xác để phân tách chúng được chỉ định bởi một thuộc tính bổ sung:

khoảng cách đường viền: 20px.

Nếu bạn cần chỉ định khoảng cách khác nhau giữa các hàng và cột thì hai giá trị được chỉ định:

khoảng cách đường viền: 10px20px.

Sự khác biệt của trình duyệt

Hãy nhớ rằng kiểu dáng bảng trong CSS có thể trông khác nhau tùy thuộc vào trình duyệt. Tình hình đặc biệt tồi tệ với các phiên bản cũ hơn, không hỗ trợ đổi mới CSS.

Trên đây là ví dụ về độ dày đường viền cho các giá trị số.

Kiểu khung cũng khác nhau rất nhiều.

Vì vậy, khi phát triển, hãy luôn xem kết quả trên các trình duyệt khác nhau.

Các nhà phát triển rất tiên tiến có thể kết nối hoàn toàn khác Tệp CSS. Và ai đó sẽ kiểm tra từng hoặc bất kỳ phong cách (lớp) cụ thể nào.

Hầu hết các vấn đề phát sinh với bóng tối.

CSS: thiết kế bảng, ví dụ

Thiết kế có thể rất đa dạng. Tất cả phụ thuộc vào toàn bộ trang web và thiết kế của nó. Mọi thứ nên được kết hợp và không đầy màu sắc. Hương vị của nhà phát triển cũng đóng một vai trò lớn. Cảm nhận về cái đẹp của mỗi người là khác nhau.

Dưới đây là ví dụ về các bảng khác nhau. Hình trên cho thấy việc sử dụng độ nghiêng và chơi với các ranh giới.

Nhiều người sẽ quan tâm đến một ví dụ về thiết kế đẹp, gọn gàng, không gây hại mắt người dùng. Tùy chọn này phù hợp trong hầu hết mọi tình huống.

Các cạnh có thể được làm tròn. Nó trông khá đẹp.

Phần kết luận

Như bạn có thể thấy, để đăng ký vẻ bề ngoài bảng trong CSS tồn tại số lượng lớn công cụ. Mỗi tham số cũng có một số lượng lớn các giá trị có thể. Nếu bạn sử dụng tất cả những thứ này cùng một lúc, bạn có thể tạo ra những kiệt tác. Đặc biệt nếu bạn làm điều đó cho tất cả các trình duyệt.

Điều chính khi thiết kế là không lạm dụng hiệu ứng. Mọi thứ cần phải được thực hiện có chừng mực. Lúc đầu, các nhà thiết kế bố cục thích thử nghiệm và sử dụng tất cả kiến thức của họ cùng một lúc. Kết quả là các bảng trở nên quá bão hòa với các thuộc tính. Hãy cố gắng tránh những sai lầm này.

Hơn nữa, một số thông số có thể ảnh hưởng lẫn nhau. Ví dụ: không cần chỉ định màu nền của bảng nếu nó cũng được đặt ở đó Hình nền, màu này sẽ chồng lên màu được chỉ định.

Trong thời gian gần đây, mức độ phổ biến của bảng đã rất cao, chúng không chỉ được sử dụng để trình bày dữ liệu dạng bảng mà còn là phương tiện chính để hình thành cấu trúc của tài liệu (mặc dù có một số nhược điểm). Hiện nay, phần tử khối DIV được sử dụng ngày càng nhiều trong bố cục tài liệu.

Bảng vẫn là thành phần chính ngôn ngữ HTML, điều này không thể thiếu để tạo các cấu trúc phức tạp và để trình bày dữ liệu dạng bảng, trong đó các phần tử khối bất lực và không có tính biến đổi như vậy.

Chân bàn

Bảng là một cấu trúc phức tạp và được hình thành từ nhiều Thẻ HTML ov. Ở giai đoạn đầu tiên, nó được xây dựng từ phần tử khối

, đại diện cho nền tảng, cơ sở của bảng. Giai đoạn tiếp theo trong quá trình xây dựng là hàng của bảng, được hình thành bằng cách sử dụng các thẻ ghép nối :

Giai đoạn cuối cùng của việc xây dựng bảng là tạo tế bào. Có hai loại thẻ cho mục đích này:

- thẻ được ghép nối sẽ tạo một ô đóng vai trò là tiêu đề cột, thẻ này Là tùy chọn;
- thẻ ghép nối bắt buộc tạo các ô - cơ sở của bảng;

Tiêu đề 1	Tiêu đề 2	Tiêu đề 3	Tiêu đề 4	Tiêu đề 5
Ô 1,1	Ô 1,2	Ô 1.3	Ô 1.4	Ô 1.5
Ô 2.1	Ô 2,2	Ô 2,3	Ô 2.4	Ô 2.5
Kết quả 1	Kết quả 2	Kết quả 3	Kết quả 4	Kết quả 5

Hình 1. Bảng

Như bạn có thể thấy từ đoạn mã trên, bảng chứa bốn hàng ( ) và năm cột. Các ô của hàng đầu tiên là tiêu đề cột ( ). Hàng thứ hai đến thứ tư chứa dữ liệu bảng chính ( ). Thẻ , là phổ quát và có thể chứa không chỉ văn bản thuần túy mà còn có thể chứa tất cả các loại thẻ, thậm chí cả các bảng khác!

Hãy chú ý đến cấu trúc của bảng; nó có cấu trúc phân cấp lồng nhau chặt chẽ; nếu bạn phá vỡ nó và sắp xếp lại các thẻ theo một thứ tự khác, bảng sẽ không được hiển thị trên trang hoặc sẽ được hiển thị nhưng không chính xác. Những nguyên tắc cơ bản khi thiết kế bảng:

Thẻ được ghép nối chân bảng, tất cả các thẻ khác được lồng trong đó;

Thẻ được ghép nối

cấp thứ hai của bảng hoặc hàng của bảng phải được lồng trong thẻ

;

Thẻ được ghép nối

và chứa dữ liệu dạng bảng;

Nếu bạn đặt bất kỳ thẻ hoặc văn bản nào khác bên ngoài thẻ phù hợp

- Phần tiêu đề cột;

- Phần chân bàn;

- Phần tóm tắt, tóm tắt toàn bộ bảng;

, , , được đặt bên trong bảng

Và

Cấp thứ ba của bảng hoặc các ô của bảng phải được lồng trong một thẻ

, khi đó dữ liệu này sẽ bị bỏ qua và không hiển thị trên trang web;

Tiêu đề bảng

Bảng cung cấp khả năng thêm tiêu đề bằng thẻ ghép nối

, được đặt sau thẻ . Về nguyên tắc, nó có thể được chèn vào bất cứ đâu trong bảng, đây không phải là lỗi. Theo mặc định, văn bản tiêu đề sẽ xuất hiện phía trên bảng.

Tiêu đề bảng
Tiêu đề 1	Tiêu đề 2	Tiêu đề 3	Tiêu đề 4	Tiêu đề 5
Ô 1,1	Ô 1,2	Ô 1.3	Ô 1.4	Ô 1.5
Ô 2.1	Ô 2,2	Ô 2,3	Ô 2.4	Ô 2.5
Kết quả 1	Kết quả 2	Kết quả 3	Kết quả 4	Kết quả 5

Cơm. 2. Bảng có tiêu đề.

Phần bảng

Bằng cách sử dụng các phần là các thẻ được ghép nối, bảng có thể được chia thành các phần logic. Chúng không được trình duyệt hiển thị trên trang, nhưng bạn có thể đặt cách trình bày khác nhau cho từng trang. Có ba phần logic sau:

và phải chứa thẻ :

Tiêu đề bảng
Tiêu đề 1	Tiêu đề 2	Tiêu đề 3	Tiêu đề 4	Tiêu đề 5
Ô 1,1	Ô 1,2	Ô 1.3	Ô 1.4	Ô 1.5
Ô 2.1	Ô 2,2	Ô 2,3	Ô 2.4	Ô 2.5
Kết quả 1	Kết quả 2	Kết quả 3	Kết quả 4	Kết quả 5

Hợp nhất các ô

Ở trên, chúng ta đã xem xét một bảng có cấu trúc đơn giản, nhưng nếu bạn cần phức tạp hóa nó, chẳng hạn như kết hợp nhiều ô thành một. Có những thuộc tính đặc biệt cho trường hợp này COLSPAN Và ROWSPAN thẻ Và . Cái đầu tiên dùng để kết hợp theo chiều ngang, cái thứ hai dùng để kết hợp theo chiều dọc. Giá trị của thuộc tính là số ô được gộp:

1. Để hợp nhất theo chiều ngang bốn ô đầu tiên dòng cuối cùng bảng, được yêu cầu bởi thuộc tính COLSPAN của thẻ (có chứa văn bản “Tổng 1”) gán giá trị 4:

Tổng cộng (1+2+3+4)

2. Để hợp nhất các ô theo chiều dọc phần chính của tài liệu (phần ), hãy sử dụng thuộc tính ROWSPAN có giá trị là 2:

Ô (1,1+2,1) Ô (1,2+2,2) Ô (1.3+2.3) Ô (1,4+2,4)

Xin lưu ý rằng nếu bạn kết hợp các ô với thuộc tính COLSPAN hoặc ROWSPAN, thì bạn phải xóa các ô đã hợp nhất khỏi mã, ngoại trừ ô bắt đầu hợp nhất, số lượng của chúng sẽ phụ thuộc vào giá trị của thuộc tính COLSPAN, ROWSPAN.

Tức là, trong ví dụ 1, bốn ô được hợp nhất, bắt đầu từ ô đầu tiên, được gán thuộc tính COLSPAN=4 (vì việc hợp nhất bắt đầu bằng nó), ba ô còn lại phải bị xóa (vì chúng được coi là đã hợp nhất). Chỉ ô thứ năm sẽ còn lại trong mã (vì nó không được bao gồm trong liên kết).

Nguyên tắc tương tự sẽ được áp dụng cho sự thống nhất theo chiều dọc. Trong ví dụ thứ hai, bốn ô đầu tiên của hàng được gán thuộc tính ROWSPAN=2, kết quả là bốn ô thấp hơn đầu tiên bị xóa khỏi mã, bởi vì họ được coi là đoàn kết. Ngoại trừ cái cuối cùng, không được đưa vào hiệp hội.

Tiêu đề bảng
Tiêu đề 1	Tiêu đề 2	Tiêu đề 3	Tiêu đề 4	Tiêu đề 5
Ô (1,1+2,1)	Ô (1,2+2,2)	Ô (1.3+2.3)	Ô (1,4+2,4)	Ô 1.5
Ô (1,1+2,1)	Ô (1,2+2,2)	Ô (1.3+2.3)	Ô (1,4+2,4)	Ô 2.5
Tổng 1+ Tổng 2+ Tổng 3+ Tổng 4	Kết quả 5

Cơm. 4. Hiệp hội ô bảng sử dụng thuộc tính COLSPAN, ROWSPAN.

Bàn trang điểm có thuộc tính CSS

Sau khi tạo bảng bằng HTML, chúng ta chuyển sang giai đoạn tiếp theo, thiết kế bảng bằng các kiểu CSS áp dụng cho thẻ

, Và (ví dụ 4).

Ví dụ 4: Tạo ngựa vằn

Bàn

Khung di động

Bạn có thể vẽ đường viền xung quanh các ô bằng thuộc tính CSS ranh giới, với cú pháp sau:

Đường viền: “độ dày đường kẻ” “loại phông chữ” “màu sắc”;

độ dày đường- có thể được chỉ định bằng pixel (px), cũng như sử dụng các từ dành riêng đặc biệt: mỏng (2 px), trung bình (4 px) và dày (6 px);
kiểu chữ- giá trị thuộc tính là các từ đặc biệt: chấm (đường chấm), nét đứt (đường chấm), liền nét (dòng), double (dòng kép), v.v.

Hình 5. Áp dụng thuộc tính viền cho các ô của bảng để đóng khung cho mỗi ô bằng một khung.

Nếu bạn muốn khung chỉ nằm giữa các ô và không đóng khung từng ô riêng biệt, bạn cần sử dụng thuộc tính style sụp đổ biên giới, lấy giá trị:

sụp đổ- chỉ có một khung giữa các ô;
chia- mỗi ô được đóng khung bởi khung riêng của nó;

Hình 6. Áp dụng thuộc tính thu gọn đường viền cho một bảng. Các ô liền kề cách nhau một khung.

Kích thước ô

Theo mặc định, trình duyệt sẽ tạo kích thước ô tùy thuộc vào nội dung của chúng, nếu cần, hãy đặt dạng tĩnh, sử dụng thuộc tính kiểu chiều rộng, chiều cao. Trong trường hợp này, nếu nội dung của ô không vừa trên một dòng thì nó sẽ được chuyển sang dòng tiếp theo.

Hình 7. Sử dụng thuộc tính chiều rộng và chiều cao để đặt chiều rộng và chiều cao của ô.

Đệm di động

Có hai loại thụt lề, bên ngoài và bên trong, loại thụt đầu tiên được đặt giữa viền của các ô liền kề, loại thứ hai từ viền của các ô đến nội dung của chúng. Các thuộc tính CSS tạo thụt lề được liệt kê bên dưới:

phần đệm- phần đệm bên trong, giá trị được đặt bằng pixel (px);
khoảng cách đường viền - lề, giá trị cũng được đặt bằng pixel (px). Thông số này không nên sử dụng nếu (border-collapse:collapse), vì thụt lề được đặt giữa viền của các ô liền kề và nếu có thuộc tính được chỉ định, các ô liền kề chỉ được phân tách bằng một khung;

Cơm. 8. Áp dụng thuộc tính đệm cho bảng để đặt thụt lề.

Vị trí tiêu đề

Theo mặc định, tiêu đề bảng nằm phía trên nó, nhưng vị trí có thể được thay đổi bằng thuộc tính style bên chú thích, nhận các giá trị sau:

đứng đầu- tiêu đề nằm phía trên bảng;
đáy- tiêu đề nằm bên dưới bảng;

Màu tế bào

Để tô một ô bằng một màu cụ thể, bạn cần sử dụng thuộc tính màu nền:

Cơm. 10. Căn chỉnh nội dung ô theo thuộc tính text-align và Vertical-align.

Tạo kiểu cho nội dung ô

Định dạng nội dung đề cập đến định dạng của văn bản có trong các ô. Khái niệm cơ bản Thuộc tính CSS, được sử dụng cho mục đích này là nét chữ:

Cơm. 11. Trang trí nội dung ô bằng thuộc tính font.

Tất cả các kiểu CSS được áp dụng cho bảng

Bảng là một yếu tố được sử dụng rộng rãi để trình bày các dữ liệu khác nhau trong bài thuyết trình, bài giảng, v.v. tờ rơi quảng cáo và không chỉ. Do tính rõ ràng, linh hoạt và đơn giản nên bảng biểu cũng được sử dụng rộng rãi trên các trang web nhằm truyền tải tốt hơn đến người đọc. vật liệu cần thiết. Bằng cách thêm toàn bộ sức mạnh của kiểu vào bảng, bạn có thể đưa bảng vào thiết kế trang web một cách thành công và trình bày dữ liệu dạng bảng một cách rõ ràng và đẹp mắt.

Chiều rộng của cái bàn

Theo mặc định, độ rộng của bảng do chính trình duyệt đặt, dựa trên khối lượng dữ liệu dạng bảng trong đó. Nếu có nhiều văn bản trong các ô thì bảng sẽ chiếm toàn bộ chiều rộng có sẵn cho nó, và nếu không có đủ văn bản thì chiều rộng của bảng sẽ tự động giảm. Nếu có nhiều bảng trên một trang, độ rộng khác nhau của chúng đôi khi trông có vẻ bất cẩn. Vì vậy, tốt hơn hết bạn nên đặt rõ ràng chiều rộng của bảng theo tỷ lệ phần trăm, pixel, em hoặc bất kỳ giá trị nào khác Đơn vị CSS, như trong ví dụ 1.

Ví dụ 1: Chiều rộng bảng tính theo phần trăm

Bảng ( chiều rộng: 100%; ) .tbl-medium ( chiều rộng: 60%; ) .tbl-nhỏ ( chiều rộng: 200px; )

TRONG trong ví dụ này chiều rộng 100% áp dụng cho tất cả các bảng. Một lần nữa, các lớp giúp thiết lập độ rộng cho các bảng đã chọn bằng cách sử dụng lớp đã tạo trước đó. Để cho bảng có chiều rộng 200 pixel, bạn cần thêm vào phần tử

lớp tbl-nhỏ.

Căn chỉnh bảng

Ban đầu, bất kỳ bảng nào cũng nằm ở cạnh trái của cửa sổ trình duyệt. Bạn có thể căn chỉnh nó vào giữa, trừ khi bảng chiếm toàn bộ diện tích có sẵn, nói cách khác là nhỏ hơn 100%. Để thực hiện việc này, hãy thêm thụt lề vào kiểu bảng bằng cách sử dụng thuộc tính lề có giá trị auto, như trong ví dụ 2.

Ví dụ 2: Căn chỉnh bảng bằng lề

Bàn

...

Trong ví dụ này, tất cả các bảng trên trang được đặt ở chế độ căn giữa.

Màu nền

Màu nền của tất cả các ô trong bảng cùng lúc được đặt thông qua thuộc tính nền, được áp dụng cho bộ chọn bảng. Trong trường hợp này, bạn nên nhớ các quy tắc sử dụng kiểu, đặc biệt là kế thừa các thuộc tính của phần tử. Nếu cùng lúc với bảng, bạn đặt màu cho bộ chọn td hoặc th thì màu đó sẽ được đặt làm nền (ví dụ 3).

Ví dụ 3: Màu nền

Bàn

Loại kết nối
Loại kết nối	trục	Tay áo
Miễn phí	H9	D10
Bình thường	N9	TÔI _S 9
Ngu độn	P9

Kết quả của ví dụ này được hiển thị trong Hình. 1.

Cơm. 1. Thay đổi màu nền

Nếu chúng ta muốn tạo một mẫu ngựa vằn, là tên được đặt cho các dòng xen kẽ có màu khác nhau, thì chúng ta nên sử dụng lớp giả :nth-child, thêm nó vào bộ chọn tr. Để ngựa vằn chỉ mở rộng đến phần thân của bảng chứ không phải phần tiêu đề của nó, chúng ta tách chúng ra khỏi nhau bằng cách sử dụng các phần tử

Khoảng cách kích thước, mm	Dung sai CNTT, µm, đối với trình độ chuyên môn
Khoảng cách kích thước, mm	5	6	7	8
Cho đến 3	4	6	10	14
Thánh 3 đến 6	5	8	12	18
Thánh 6 đến 10	6	9	15	22
Thánh 10 đến 18	8	11	18	27
Thánh 18 đến 30	9	13	21	33
Thánh 30 đến 50	11	16	25	39
Thánh 50 đến 80	13	19	30	46

Kết quả của ví dụ này được hiển thị trong Hình. 2.

Cơm. 2. Ngựa vằn

Giá trị chẵn của bộ chọn :nth-child áp dụng kiểu cho tất cả các hàng được đánh số chẵn và đặt màu nền của chúng. Bạn cũng có thể thay đổi nó thành lẻ, sau đó xám Các hàng lẻ sẽ được đánh dấu.

Tương tự, các cột, không phải hàng, được đánh dấu bằng màu; để làm được điều này, bạn nên sử dụng bộ chọn tbody td:nth-child(even) .

Lề bên trong ô

Lề là khoảng cách giữa viền ô và nội dung của nó. Không có lề, văn bản trong bảng sẽ “dính” vào khung, do đó làm giảm khả năng nhận biết của nó, nhưng việc thêm lề sẽ cải thiện khả năng đọc của văn bản. Với mục đích này, thuộc tính kiểu đệm được sử dụng, hoạt động với bộ chọn td hoặc th, như được hiển thị ở trên trong ví dụ 3 và 4. Thông thường, một giá trị được chỉ định, sau đó chỉ định khoảng trống xung quanh nội dung của ô từ mọi phía cùng một lúc. Hai giá trị được viết khi bạn cần đặt các trường khác nhau theo chiều dọc (giá trị đầu tiên) và chiều ngang (giá trị thứ hai).

Khoảng cách giữa các ô

Có một khoảng trống nhỏ giữa các ô không thể nhìn thấy được trừ khi bạn đặt đường viền hoặc màu nền cho các ô. Khoảng cách này ban đầu là 2px và có thể được thay đổi bằng cách sử dụng thuộc tính border-spacing bằng cách thêm nó vào bộ chọn bảng (Ví dụ 5).

Ví dụ 5: Sử dụng khoảng cách giữa các đường viền

Bảng ( border-spacing: 3px; /* Khoảng cách giữa các ô */ ) thứ ( nền: #e08156; /* Màu nền tiêu đề */ color: #333; /* Màu văn bản */ ) td, th ( đệm: 5px ; /* Các trường trong ô */ nền: #4c715b; /* Màu nền của ô */ màu: #f5e8d0; /* Màu văn bản */ )

Thêm kiểu này vào bất kỳ bảng nào, chúng ta sẽ nhận được kết quả như trong Hình. 3.

Cơm. 3. Xem bảng với khoảng cách giữa các ô

Nếu bạn thêm vào bảng tài sản biên giới-collapse với giá trị thu gọn thì khoảng cách đường viền bị bỏ qua vì không còn khoảng cách giữa các ô.

Đường viền và khung

Để phân tách rõ ràng nội dung của ô này với ô khác, đường viền được thêm vào các ô. Chúng được tạo bởi thuộc tính kiểu đường viền, được áp dụng cho các phần tử ( hoặc ). Tuy nhiên, ở đây chúng ta đang bị cản trở đá dưới nước. Vì khung được tạo cho mỗi ô nên sẽ có đường viền có độ dày gấp đôi ở nơi các ô tiếp xúc. Có một số cách để loại bỏ tính năng này. Cách đơn giản nhất là sử dụng thuộc tính border-collapse với giá trị là thu gọn. Nhiệm vụ của nó là theo dõi sự tiếp xúc của các đường và thay vì một đường viền kép, hãy mô tả một đường viền duy nhất. Bạn chỉ cần thêm thuộc tính này vào bộ chọn bảng, sau đó nó sẽ tự thực hiện mọi thứ (ví dụ 6).

Ví dụ 6: Sử dụng thuộc tính border-collapse khi tạo viền bảng

Bàn

ồ	X	X
ồ	ồ	X
X	X	ồ

Sự khác biệt giữa các đường viền bảng có và không có thuộc tính thu gọn đường viền được thể hiện trong Hình 2. 4.

Cơm. 4. Chế độ xem bảng khi sử dụng tính năng thu gọn đường viền

Trong bộ lễ phục. Hình 4a hiển thị khung bảng mặc định. Xin lưu ý rằng bên trong bảng tất cả các dòng có độ dày gấp đôi. Việc thêm tính năng thu gọn đường viền sẽ loại bỏ tính năng này và độ dày của tất cả các đường trở nên giống nhau (Hình 4b).

Các dòng không nhất thiết phải nằm ở tất cả các cạnh của ô, nhưng có thể được thiết kế để phân tách một hàng hoặc cột với một hàng hoặc cột khác. Để làm điều này, chúng tôi sử dụng các thuộc tính border-bottom , border-left và các thuộc tính tương tự khác. Áp dụng đường viền cho các phần tử , , Và Điều này là không thể, vì vậy chúng tôi thêm chúng vào bảng và bộ chọn td (ví dụ 7).

Ví dụ 7. Dòng giữa các dòng

Bàn

Loại kết nối	Các trường dung sai cho chiều rộng rãnh then
Loại kết nối	trục	Tay áo
Miễn phí	H9	D10
Bình thường	N9	TÔI _S 9
Ngu độn	P9

Kết quả của ví dụ này được hiển thị trong Hình. 5.

Cơm. 5. Bảng có đường kẻ ngang

Theo mặc định, văn bản trong ô bảng được căn trái và căn giữa. Ngoại lệ là phần tử , nó xác định một ô tiêu đề trong đó căn chỉnh được căn giữa. Để thay đổi phương pháp căn chỉnh, hãy sử dụng kiểu thuộc tính căn chỉnh văn bản(ví dụ 8).

Ví dụ 8: Căn chỉnh nội dung ô theo chiều ngang

Bàn

Tiêu đề 1	Ô 1	Ô 2
Tiêu đề 2	Ô 3	Ô 4

Trong ví dụ này, nội dung được căn chỉnh sang trái và nội dung - ở Trung tâm. Kết quả của ví dụ được hiển thị bên dưới (Hình 6).

Cơm. 6. Căn chỉnh văn bản trong ô

Căn chỉnh theo chiều dọc trong một ô luôn được căn giữa trừ khi có ghi chú khác. Điều này không phải lúc nào cũng thuận tiện, đặc biệt đối với các bảng có nội dung ô có chiều cao khác nhau. Trong trường hợp này, căn chỉnh được đặt ở cạnh trên cùng của ô bằng cách sử dụng thuộc tính Vertical-align có giá trị top , như trong Ví dụ 9.

Ví dụ 9. Căn chỉnh nội dung ô theo chiều dọc

Bàn

Loại kết nối	Các trường dung sai cho chiều rộng rãnh then
Loại kết nối	trục	Tay áo
Miễn phí	H9	D10
Bình thường	N9	TÔI _S 9
Ngu độn	P9

Trong ví dụ này, văn bản được căn chỉnh theo cạnh trên. Kết quả của ví dụ được hiển thị trong Hình. 7.

Dữ liệu dạng bảng- thông tin có thể được hiển thị trong bảng và được chia thành các cột và hàng một cách hợp lý. Thẻ HTML được sử dụng để hiển thị dữ liệu dạng bảng trên các trang web

, là một thùng chứa nội dung của bảng. Nội dung HTML bảng được mô tả từng dòng, mỗi dòng bắt đầu bằng thẻ mở và kết thúc bằng thẻ đóng .

Bên trong một thẻ

các ô trong bảng được biểu thị bằng các thẻ được định vị

hoặc

. Đó là các ô chứa tất cả nội dung bảng hiển thị trên trang web.

Khung bàn

Theo mặc định, bảng HTML trên trang web được hiển thị không có đường viền; để thêm đường viền vào bảng, giống như tất cả các thành phần khác, thuộc tính CSS border được sử dụng. Nhưng điều đáng chú ý là nếu bạn chỉ thêm khung vào một phần tử

, sau đó nó sẽ được hiển thị xung quanh toàn bộ bảng. Để các ô trong bảng cũng có viền, bạn sẽ cần đặt thuộc tính viền cho các thành phần , do đó khi cần để ô không có nội dung nhưng hiển thị màu nền thì bên trong ô sẽ thêm dấu cách không ngăn cách () . Không gian không phải lúc nào cũng phù hợp, đặc biệt khi bạn cần đặt chiều cao ô thành 1-2 pixel, đó là lý do tại sao pixel đơn trở nên phổ biến vẽ trong suốt. Thật vậy, một bức ảnh như vậy có thể được thu nhỏ theo ý của bạn, nhưng nó không được hiển thị trên trang web theo bất kỳ cách nào.

May mắn thay, thời đại của các bản vẽ một pixel và tất cả các loại miếng đệm dựa trên chúng đã qua. Trình duyệt hoạt động khá chính xác với các bảng ngay cả khi không có nội dung ô.

Để kiểm soát sự xuất hiện của các ô trống, hãy sử dụng thuộc tính ô trống; khi được đặt thành ẩn, đường viền và nền sẽ không được hiển thị trong các ô trống. Nếu tất cả các ô trong một hàng đều trống thì toàn bộ hàng đó sẽ bị ẩn. Ô được coi là trống trong các trường hợp sau:

không có biểu tượng nào cả;
ô chỉ chứa một dòng mới, tab hoặc dấu cách;
khả năng hiển thị được đặt thành ẩn .

Phép cộng không gian không phá vỡđược coi là nội dung hiển thị, tức là ô sẽ không còn trống nữa (ví dụ 2.10).

Ví dụ 2.10. Ô trống

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Sử dụng ô trống

Và

Bảng, th, td ( border: 1px màu đen; ) Hãy thử »

Bây giờ cả bảng và ô đều có đường viền, đồng thời mỗi ô và bảng đều có đường viền riêng. Kết quả là, khoảng trống xuất hiện giữa các khung; kích thước của khoảng trống này có thể được kiểm soát bởi thuộc tính border-spacing, được đặt cho toàn bộ bảng. Nói cách khác, bạn không thể kiểm soát khoảng cách giữa các ô riêng lẻ.

Ngay cả khi bạn xóa khoảng cách giữa các ô bằng giá trị thuộc tính khoảng cách đường viền 0, đường viền của các ô sẽ chạm vào nhau, tăng gấp đôi kích thước. Để kết hợp các đường viền ô, hãy sử dụng thuộc tính thu gọn đường viền. Nó có thể có hai nghĩa:

riêng biệt: là mặc định. Các ô được hiển thị trên một khoảng cách ngắn với nhau, mỗi ô có đường viền riêng.
thu gọn: nối các khung liền kề thành một, tất cả khoảng cách giữa các ô, cũng như giữa các ô và khung bảng, đều bị bỏ qua.

Tên tài liệu

Tên	Họ
Homer	Simpson
Marge	Simpson

Tên	Họ
Homer	Simpson
Marge	Simpson

Thử "

Kích thước bàn

Sau khi thêm đường viền vào các ô của bảng, có thể nhận thấy rằng nội dung của các ô quá gần với các cạnh. Để thêm khoảng trắng giữa các cạnh của ô và nội dung của chúng, bạn có thể sử dụng thuộc tính đệm:

Th, td ( đệm: 7px; ) Hãy thử »

Kích thước của bảng phụ thuộc vào nội dung của nó, nhưng các tình huống thường phát sinh khi bảng quá hẹp và cần phải kéo dài nó ra. Chiều rộng và chiều cao của bảng có thể được thay đổi bằng cách sử dụng thuộc tính chiều rộng và chiều cao bằng cách chỉ định kích thước yêu cầu hoặc chính bảng hoặc các ô:

Bảng (chiều rộng: 70%; ) thứ (chiều cao: 50px; ) Hãy thử »

Căn chỉnh văn bản

Theo mặc định, văn bản trong các ô tiêu đề bảng được căn giữa, trong khi văn bản trong các ô thông thường được căn trái; bằng cách sử dụng thuộc tính text-align, bạn có thể kiểm soát việc căn chỉnh văn bản theo chiều ngang.

Thuộc tính CSS căn chỉnh theo chiều dọc cho phép bạn kiểm soát việc căn chỉnh theo chiều dọc của nội dung văn bản. Theo mặc định, văn bản được căn chỉnh theo chiều dọc vào giữa ô. Căn dọc có thể được ghi đè bằng cách sử dụng một trong các giá trị thuộc tính căn chỉnh dọc:

top: văn bản được căn chỉnh theo đường viền trên cùng của ô
giữa: căn văn bản vào giữa (mặc định)
dưới cùng: văn bản được căn chỉnh theo Giơi hạn dươi tế bào

Tên tài liệu

Tên	Họ
Homer	Simpson
Marge	Simpson

Thử "

Thay đổi màu nền của các hàng trong bảng

Trong khi xem bàn lớn chứa nhiều dòng với một lượng lớn thông tin, có thể khó theo dõi dữ liệu nào thuộc về một hàng cụ thể. Để giúp người dùng tìm đường, bạn có thể sử dụng luân phiên hai màu nền khác nhau. Để tạo hiệu ứng được mô tả, bạn có thể sử dụng bộ chọn lớp, thêm nó vào mỗi hàng thứ hai của bảng:

Tên tài liệu

Tên	Họ	Chức vụ
Homer	Simpson	bố
Marge	Simpson	mẹ
Bart	Simpson	Con trai
Lisa	Simpson	con gái

Thử "

Việc thêm thuộc tính lớp vào mỗi dòng khác khá tẻ nhạt. Lớp giả:nth-child đã được thêm vào CSS3 để cung cấp giải pháp thay thế cho vấn đề này. Bây giờ hiệu ứng xen kẽ có thể đạt được độc quyền sử dụng CSS mà không thay đổi đánh dấu HTML của tài liệu. Sử dụng lớp giả:nth-child, bạn có thể chọn tất cả các hàng chẵn hoặc lẻ của bảng bằng cách sử dụng một trong các từ khóa: chẵn (chẵn) hoặc lẻ (lẻ):

Tr:nth-child(odd) ( màu nền: #EAF2D3; ) Hãy thử »

Thay đổi nền hàng khi di chuột

Một cách khác để cải thiện khả năng đọc dữ liệu dạng bảng là thay đổi màu nền dòng khi bạn di con trỏ chuột qua nó. Điều này sẽ giúp làm nổi bật nội dung mong muốn của bảng và tăng cảm nhận trực quan về dữ liệu.

Việc thực hiện hiệu ứng như vậy rất đơn giản; để thực hiện việc này, bạn cần thêm pseudo-class:hover vào bộ chọn hàng của bảng và đặt màu nền mong muốn:

Tr:hover ( màu nền: #E0E0FF; ) Hãy thử »

Căn chỉnh bảng vào giữa

Căn chỉnh HTML Việc căn giữa bảng chỉ có thể thực hiện được nếu chiều rộng của bảng nhỏ hơn chiều rộng của phần tử cha của nó. Để căn chỉnh bảng vào giữa, bạn cần sử dụng thuộc tính lề, cung cấp cho nó ít nhất hai giá trị: giá trị đầu tiên sẽ chịu trách nhiệm về lề ngoài của bảng ở trên cùng và dưới cùng, và giá trị thứ hai sẽ chịu trách nhiệm về lề ngoài của bảng ở trên cùng và dưới cùng. tự động căn chỉnh vào trung tâm:

Bảng ( lề: 10px tự động; ) Hãy thử »

Nếu bạn cần vết lõm khác nhauở đầu và cuối bảng, bạn có thể đặt thuộc tính lề thành ba giá trị: giá trị đầu tiên chịu trách nhiệm về lề trên, giá trị thứ hai để căn chỉnh theo chiều ngang và giá trị thứ ba cho lề dưới:

Bảng ( lề: 10px auto 30px; )

Bản thân các bảng trông khá kém và trình duyệt hiển thị một số đặc điểm của bảng, đặc biệt là các khung, theo cách riêng của chúng. Đồng thời, những thiếu sót này có thể dễ dàng được sửa chữa bằng cách sử dụng sức mạnh của phong cách. Đồng thời, các phương tiện thiết kế bảng được mở rộng đáng kể, điều này cho phép bạn khớp thành công các bảng vào thiết kế trang web và trình bày dữ liệu dạng bảng rõ ràng hơn.

Màu nền ô

Màu nền của tất cả các ô trong bảng cùng lúc được đặt thông qua thuộc tính nền, được áp dụng cho bộ chọn TABLE. Trong trường hợp này, bạn nên nhớ các quy tắc sử dụng kiểu, đặc biệt là kế thừa các thuộc tính của phần tử. Mặc dù thuộc tính nền không được kế thừa nhưng giá trị nền mặc định cho các ô là trong suốt, tức là. trong suốt, do đó hiệu ứng tô nền cũng thu được cho các ô. Nếu đồng thời với TABLE, bạn đặt màu của bộ chọn TD hoặc TH thì màu này sẽ được đặt làm nền của ô (ví dụ 2.3).

Ví dụ 2.3. Màu nền

Những cái bàn

Tiêu đề 1	Tiêu đề 2
Ô 3	Ô 4

Trong ví dụ này chúng tôi nhận được Màu xanh nền ô (thẻ

) và màu đỏ ở tiêu đề (thẻ

). Điều này là do kiểu cho bộ chọn TH không được xác định, do đó nền của bộ chọn gốc, trong trường hợp này là bộ chọn TABLE, được "hiển thị xuyên suốt". Và màu của bộ chọn TD được chỉ định rõ ràng, do đó các ô được “tô” bằng màu xanh lam.

Kết quả của ví dụ này được hiển thị trong Hình. 2.4.

Cơm. 2.4. Thay đổi màu nền

Lề bên trong ô

Lề là khoảng cách giữa cạnh của nội dung ô và đường viền của ô đó. Thông thường, thuộc tính cellpadding của thẻ được sử dụng cho mục đích này.

. Nó xác định giá trị lề bằng pixel trên tất cả các cạnh của ô. Có thể sử dụng thuộc tính kiểu đệm bằng cách thêm nó vào bộ chọn TD, như trong Ví dụ 2.4.

Ví dụ 2.4. Các trường trong bảng

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Những cái bàn

Tiêu đề 1	Tiêu đề 2
Ô 3	Ô 4

Trong ví dụ này, bằng cách nhóm các bộ chọn, các trường được đặt đồng thời cho bộ chọn TD và TH. Kết quả của ví dụ được hiển thị trong Hình. 2.5.

Cơm. 2.5. Các trường trong ô

Nếu thuộc tính kiểu đệm được áp dụng cho các ô của bảng thì tác dụng của thuộc tính đệm ô của thẻ

làm ngơ.

Khoảng cách giữa các ô

Để thay đổi khoảng cách giữa các ô, hãy sử dụng thuộc tính cellspaces của thẻ

. Tác dụng của thuộc tính này có thể thấy rõ khi bạn sử dụng đường viền xung quanh các ô hoặc khi tô màu các ô nổi bật so với nền của trang. Thuộc tính style border-spacing đóng vai trò thay thế cho cellspace; nó đặt khoảng cách giữa các đường viền của ô. Một giá trị đặt cả khoảng cách dọc và ngang giữa các viền ô. Nếu thuộc tính này có hai giá trị thì giá trị đầu tiên xác định khoảng cách theo chiều ngang (nghĩa là ở bên trái và bên phải của ô) và giá trị thứ hai xác định khoảng cách theo chiều dọc (trên và dưới).

Thuộc tính khoảng cách đường viền chỉ có hiệu lực nếu bộ chọn TABLE không có thuộc tính thu gọn đường viền được đặt thành thu gọn (Ví dụ 2.5).

Ví dụ 2.5. Khoảng cách giữa các viền ô

XHTML 1.0 CSS 2.1 IE 7 IE 8+ Cr Op Sa Fx

Thay thế khoảng cách ô

Leonardo	5	8
Raphael	4	11
Michelangelo	24	9
Donatello	2	13

Kết quả của ví dụ này được hiển thị trong Hình. 2.6.

Cơm. 2.6. Chế độ xem bảng khi sử dụng khoảng cách đường viền

Trình duyệt trình duyệt web IE các phiên bản lên đến và bao gồm cả phiên bản 7 không hỗ trợ thuộc tính khoảng cách đường viền, vì vậy trong trình duyệt này, giá trị khoảng cách ô mặc định (thường là 2px) sẽ được sử dụng cho các bảng.

Khi thêm thuộc tính thu gọn đường viền có giá trị thu gọn vào bộ chọn TABLE, thuộc tính khoảng cách ô sẽ bị bỏ qua và giá trị khoảng cách đường viền được đặt lại về 0.

Đường viền và khung

Theo mặc định, ban đầu không có đường viền trong bảng và việc bổ sung nó xảy ra bằng thuộc tính đường viền của thẻ

. Các trình duyệt hiển thị đường viền như vậy một cách khác nhau, vì vậy tốt hơn hết là không chỉ định thuộc tính này và để việc vẽ đường viền theo kiểu. Chúng ta hãy xem xét hai phương pháp liên quan trực tiếp đến phong cách.

Sử dụng thuộc tính cellspaces

Được biết, thuộc tính cellspaces của thẻ

đặt khoảng cách giữa các ô của bảng. Nếu bạn sử dụng các màu nền khác nhau cho bảng và ô, thì giữa các ô sẽ xuất hiện một lưới các đường có màu trùng với màu của bảng và độ dày bằng giá trị của thuộc tính khoảng cách ô tính bằng pixel. Ví dụ 2.3 ở trên thể hiện hiệu ứng này nên tôi sẽ không lặp lại.

Lưu ý rằng điều này không hoàn toàn Một cách thuận tiện tạo ra ranh giới vì nó có phạm vi hạn chế. Bằng cách này, bạn chỉ có thể có được lưới một màu chứ không phải theo chiều dọc hoặc đường ngangở những nơi thích hợp.

Sử dụng thuộc tính đường viền

Thuộc tính kiểu đường viền đồng thời đặt màu, kiểu và độ dày của đường viền xung quanh một phần tử. Khi bạn cần tạo các dòng riêng biệt trên các mặt khác nhau, tốt hơn là sử dụng các dẫn xuất - border-left , border-right , border-top và border-bottom , các thuộc tính này lần lượt xác định đường viền bên trái, bên phải, trên và dưới.

Bằng cách áp dụng thuộc tính đường viền cho bộ chọn TABLE, chúng ta thêm đường viền xung quanh toàn bộ bảng và đối với bộ chọn TD hoặc TH, chúng ta thêm đường viền xung quanh các ô (Ví dụ 2.6).

Ví dụ 2.6. Thêm khung đôi

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Những cái bàn

Tiêu đề 1	Tiêu đề 2
Ô 3	Ô 4

Ví dụ này sử dụng đường viền đôi màu đen xung quanh bảng và đường viền liền nét trắng xung quanh mỗi tế bào. Kết quả của ví dụ được hiển thị trong Hình. 2.7.

Cơm. 2.7. Viền xung quanh bảng và ô

Xin lưu ý rằng các đường đôi được hình thành ở nơi các ô tham gia. Chúng được lấy lại do hoạt động của thuộc tính khoảng cách ô của thẻ

. Mặc dù thuộc tính này không xuất hiện ở bất kỳ đâu trong mã ví dụ nhưng trình duyệt sử dụng nó theo mặc định. Nếu bạn đặt

, thì chúng ta không có được đường gấp đôi mà là đường đơn, mà có độ dày gấp đôi. Để thay đổi tính năng này, hãy sử dụng thuộc tính kiểu thu gọn đường viền với giá trị thu gọn, được thêm vào bộ chọn TABLE (ví dụ 2.7).

Ví dụ 2.7. Tạo một khung đơn

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Những cái bàn

Tiêu đề 1	Tiêu đề 2
Ô 3	Ô 4

Ví dụ này tạo ra một đường liền nét màu xanh lục giữa các ô và một đường màu đen xung quanh bảng. Tất cả các đường viền trong bảng có cùng độ dày. Kết quả của ví dụ được hiển thị trong Hình. 2.8.

Cơm. 2.8. Viền xung quanh bàn

Căn chỉnh nội dung ô

Theo mặc định, văn bản trong ô bảng được căn trái. Ngoại lệ cho quy tắc này là thẻ

, nó xác định một tiêu đề được căn giữa. Để thay đổi phương pháp căn chỉnh, hãy sử dụng thuộc tính kiểu căn chỉnh văn bản (ví dụ 2.8).

Ví dụ 2.8. Căn chỉnh nội dung ô theo chiều ngang

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Những cái bàn

Tiêu đề 1	Ô 1	Ô 2
Tiêu đề 2	Ô 3	Ô 4

Trong ví dụ này, nội dung của thẻ

được căn chỉnh sang trái và nội dung của thẻ

- ở Trung tâm. Kết quả của ví dụ được thể hiện dưới đây (Hình 2.9).

Cơm. 2.9. Căn chỉnh văn bản trong ô

Căn chỉnh theo chiều dọc trong một ô luôn được căn giữa trừ khi có ghi chú khác. Điều này không phải lúc nào cũng thuận tiện, đặc biệt đối với các bảng có nội dung ô có chiều cao khác nhau. Trong trường hợp này, căn chỉnh được đặt ở cạnh trên cùng của ô bằng thuộc tính căn chỉnh dọc, như trong Ví dụ 2.9.

Ví dụ 2.9. Căn chỉnh nội dung ô theo chiều dọc

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Những cái bàn

Tiêu đề 1	Tiêu đề 2
Ô 1	Ô 2

Ví dụ này đặt chiều cao của tiêu đề

như 40 pixel và văn bản được căn chỉnh ở cạnh dưới. Kết quả của ví dụ được hiển thị trong Hình. 2.10.

Cơm. 2.10. Căn chỉnh văn bản trong ô

Ô trống

Trình duyệt hiển thị một ô không có gì bên trong nó theo cách khác. “Không có gì” trong trường hợp này có nghĩa là cả hình ảnh và văn bản đều không được thêm vào bên trong ô và khoảng trắng không được tính đến. Đương nhiên, hình thức của các ô chỉ khác nhau nếu có đường viền xung quanh chúng. Khi sử dụng đường viền vô hình, hình thức của các ô, bất kể có gì trong đó hay không, đều giống nhau.

Các trình duyệt cũ hơn không hiển thị màu nền của các ô xem trống