Bảng css html phong cách
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 (
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à 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ẻ 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
, 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
. 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ẻ 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:
-
- Phần tiêu đề cột;
- - Phần chân bàn;
- - Phần dữ liệu tổng hợp, tóm tắt toàn bộ bảng;
,
, , được đặt bên trong bảngvà phải chứa thẻ
: ), hãy sử dụng thuộc tính ROWSPAN có giá trị là 2: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
Ô (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 Ô 2.5 Tổng 1+ Tổng 2+ Tổng 3+ Tổng 4 Kết quả 5 
Cơm. 4. Hợp nhất các ô trong bảng bằng thuộc tính COLSPAN, ROWSPAN.
Bàn trang điểm có thuộc tính CSS
Sau khi tạo bảng sử dụng HTML, 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ẻ
,
, , . Khung di động
Bạn có thể vẽ khung xung quanh các ô bằng cách sử dụng sử dụng CSS của cải 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, 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àu một ô một màu nhất định bạn cần sử dụng tài sản 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
Thiết kế bảng bằng CSS là một hoạt động 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 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. TRONG Kiểu CSSĐiểm hay của bảng 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.
- - Phần chân bàn;
- Thẻ được ghép nối