Liên lạc

Tất cả các thuộc tính css html của bảng

  • 31.10.2020

Xin chào! Vì vậy, bây giờ bạn có thể tạo các bảng cơ bản, bao gồm nhiều hàng và cột tùy ý. Không tệ không tệ. Bây giờ chúng ta hãy nói về thiết kế của những chiếc bàn này.

Trong bài học trước, các bảng được hiển thị không có đường viền. Và, bạn thấy đấy, nó trông thật quá, bạn thậm chí không thể gọi nó là một dấu hiệu. Để tạo đường viền bảng trong HTML, hãy thêm vào thẻ

thuộc tính biên giới, cho nó một giá trị khác 0.

Vì vậy, hãy tạo đường viền cho bảng. Ví dụ: đối với cái mà chúng tôi đã có:

Ô trên cùng bên tráiÔ trên cùng bên phải
Ô dưới cùng bên tráiÔ dưới cùng bên phải

Kết quả trên trình duyệt:

Cách xóa đường viền bảng

Đổi lại, để loại bỏ các đường viền của bảng HTML, hoặc bạn cũng có thể nói để làm cho chúng ẩn, bạn cần thuộc tính biên giới đặt giá trị 0 ... Sau những thao tác đơn giản này, khung sẽ bị xóa.

Thuộc tính cho phép bạn tạo nhưng không quản lý đường viền. Nó chỉ cho phép bạn thay đổi độ dày của chúng.

Do đó, bây giờ chúng ta sẽ nói về CSSthuộc tính của ai làm cho nó trở nên khả thi với biên giớitạo các đường viền khác nhau, cả bên trong mỗi ô và bên ngoài, xung quanh toàn bộ bảng.

Hãy xem cách áp dụng CSS để tạo đường viền bên ngoài và bên trong của bảng.
Để thực hiện việc này, hãy xóa thuộc tính border khỏi bảng của chúng tôi và thêm các kiểu:

Bảng ví dụ

Ô trên cùng bên trái Ô trên cùng bên phải
Ô dưới cùng bên trái Ô dưới cùng bên phải


Kết quả trên trình duyệt:

Bây giờ chúng ta hãy thêm đường viền cho mỗi ô. Để làm điều này, chỉ cần thêm các kiểu:

Kết quả trên trình duyệt:

Cách loại bỏ khoảng đệm giữa các ô trong bảng HTML

Đồng ý rằng đường viền được xác định bằng CSS trông không giống như bạn muốn. Không nghi ngờ gì nữa, từ quan điểm của mỹ học, có việc phải làm. Trên trang trình duyệt, bạn có thể thấy rằng theo mặc định, nó hiển thị đường viền của bảng và ô riêng biệt. Một ví dụ minh chứng rõ ràng điều này.

Tuy nhiên, hoàn toàn có thể loại bỏ các đường viền như vậy, được gọi là gấp đôi, nếu chúng ta sử dụng thuộc tính CSS thu gọn đường viền. Trong thực tế, nó trông như thế này:

Bảng (border: solid 1px blue; border-crash: sập;) ...

Do đó, khoảng cách giữa các ô bị xóa:

Giá trị thu gọn được gán cho thuộc tính border sẽ xóa các đường viền kép. Như bạn có thể thấy, kết quả là sự thu gọn của các đường viền ô liền kề, cũng như đường viền ô và đường viền bên ngoài của bảng. Đối với phần sau, nó có thể được gỡ bỏ hoàn toàn. Và nếu có nhu cầu hiển thị nó, bạn cần tăng chiều rộng của nó. Do đó, chúng tôi đã loại bỏ các dấu phân cách trong bảng. Và trong bài học tiếp theo, chúng ta sẽ nói về cách bạn có thể thiết lập các đường viền dọc và ngang. Chúc mọi người may mắn!

Dữ liệu dạng bảng - thông tin có thể được hiển thị dưới dạng bảng và được phân chia hợp lý thành các cột và hàng. 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 bảng HTML đượ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 thẻ

các ô trong bảng được đại diện bởi các thẻ nằm ở vị trí
hoặc là ... Đây là các ô chứa tất cả nội dung bảng được hiển thị trên trang web.

Khung bảng

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 phần tử khác, thuộc tính CSS border được sử dụng. Nhưng bạn nên chú ý đến thực tế là nếu bạn chỉ thêm đường viền vào phần tử

thì nó sẽ được hiển thị xung quanh toàn bộ bảng. Để các ô trong bảng cũng có đường viền, bạn sẽ cần đặt thuộc tính đường viền cho các phần tử
và .

Table, th, td (border: 1px solid black;) Hãy thử "

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

Ngay cả khi chúng ta loại bỏ khoảng cách giữa các ô bằng cách sử dụng giá trị 0 của thuộc tính border-spacing, thì đường viền của các ô sẽ tiếp xúc với nhau, tăng gấp đôi. Thuộc tính thu gọn đường viền được sử dụng để kết hợp các đường viền ô. Nó có thể nhận hai giá trị:

  • riêng biệt: là mặc định. Các ô được hiển thị cách nhau một khoảng ngắn, mỗi ô có khung riêng.
  • thu gọn: kết nối các khung liền kề thành một, tất cả các khoảng trống 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ênHọ
HomerSimpson
MargeSimpson

TênHọ
HomerSimpson
MargeSimpson


Thử "

Kích thước bàn

Sau khi thêm khung vào các ô trong 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. Bạn có thể sử dụng thuộc tính padding để thêm khoảng trắng giữa các cạnh của ô và nội dung của chúng:

Th, td (padding: 7px;) Hãy thử nó "

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àn quá hẹp và cần phải kéo dài nó. 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, đặt các kích thước mong muốn hoặc bản thân bảng hoặc các ô:

Bảng (width: 70%;) th (height: 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 và văn bản trong các ô thông thường được căn trái, sử dụng thuộc tính text-align, bạn có thể kiểm soát căn lề ngang của văn bản.

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 ở giữa các ô. Căn chỉnh theo chiều dọc có thể được ghi đè bằng một trong các giá trị cho thuộc tính căn chỉnh theo chiều dọc:

  • trên cùng: văn bản được căn chỉnh ở đầu ô
  • giữa: căn chỉnh văn bản vào giữa (mặc định)
  • bottom: văn bản được căn chỉnh đến cuối ô
Tên tài liệu
TênHọ
HomerSimpson
MargeSimpson


Thử "

Xen kẽ màu nền của các hàng trong bảng

Khi nhìn vào các bảng lớn chứa nhiều hàng với nhiều thông tin, có thể khó theo dõi dữ liệu nào thuộc một hàng cụ thể. Để giúp người dùng điều hướng, bạn có thể sử dụng xen kẽ 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ênHọChức vụ
HomerSimpsonbố
MargeSimpsonmẹ
BartSimpsonmột đứa con trai
LizaSimpsoncon gái


Thử "

Thêm một thuộc tính lớp vào mỗi dòng thứ hai là một công việc tẻ nhạt. Trong CSS3, lớp giả: nth-child đã được thêm vào để giải quyết vấn đề này theo một cách khác. Giờ đây, hiệu quả của việc xen kẽ có thể đạt được chỉ bằng cách sử dụng CSS mà không cần thay đổi đánh dấu HTML của tài liệu. Với lớp giả: nth-child, bạn có thể chọn tất cả các hàng lẻ hoặc hàng chẵn trong 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 (lẻ) (background-color: # EAF2D3;) Hãy thử "

Thay đổi nền đường khi di chuột

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

Rất dễ thực hiện hiệu ứng này, để thực hiện hiệu ứng này, bạn cần thêm: hover pseudo-class vào bộ chọn hàng trong bảng và đặt màu nền mong muốn:

Tr: hover (background-color: # E0E0FF;) Hãy thử "

Căn giữa bảng

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

Bảng (margin: 10px auto;) Hãy thử nó "

Nếu bạn cần các lề 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 sẽ chịu trách nhiệm cho lề trên, thứ hai cho căn chỉnh theo chiều ngang và thứ ba cho lề dưới:

Bảng (lề: 10px tự động 30px;)

Bảng HTML tương tác trực tuyến miễn phí và trình tạo kiểu lưới div có cấu trúc và trình tạo mã.

Chọn một kiểu từ thư viện và điều chỉnh cài đặt để lấy mã HTML và CSS. Có 3 trình chỉnh sửa ở cuối trang hiển thị mã và bản xem trước thay đổi khi bạn điều chỉnh cài đặt trong bảng điều khiển.

Cách sử dụng Trình tạo kiểu CSS bảng

Trước tiên, hãy chọn một kiểu từ thư viện trông giống với thiết kế của bạn.

Chọn bất cứ khi nào bạn muốn sử dụng thẻ Bảng HTML hoặc thẻ Div có cấu trúc trong đánh dấu của bạn và điều chỉnh giao diện thiết kế của bạn bằng bộ chọn màu, thanh trượt và hộp kiểm. Có một hộp riêng để tạo kiểu cho toàn bộ bảng, đầu trang, nội dung và chân trang.

Bạn có thể điều chỉnh thêm trong mã hoặc trong trình chỉnh sửa WYSIWYG. Thay đổi bất kỳ trình chỉnh sửa nào trong ba trình chỉnh sửa và kết quả sẽ phản ánh trong các trình chỉnh sửa khác. Đảm bảo nhấp vào nút "Áp dụng CSS" khi bạn thay đổi mã CSS.

Có thể có sự khác biệt nhỏ giữa bản xem trước div và bảng mà bạn có thể điều chỉnh bằng CSS.

Lưu ý rằng kết quả cuối cùng có thể hơi khác khi bạn xuất bản nó trên một trang web trực tiếp.

Các tính năng khác

Công cụ tạo kiểu bảng trực tuyến này cho phép bạn lưu / xuất cài đặt hiện tại ở định dạng văn bản thuần túy, bạn có thể mở / nhập sau.

Mục đích của bài học: Làm quen với các thuộc tính bảng và nguyên tắc bố trí bảng CSS


Hãy xem các thuộc tính bảng CSS cơ bản

biên giới

Một thuộc tính được xem xét trong một và bao gồm nhiều thuộc tính cùng một lúc:

  • KIỂU VIỀN
  • BORDER-WIDTH (RỘNG RỘNG RỘNG RÃI)
  • BIÊN GIỚI-MÀU SẮC (MÀU BIÊN GIỚI)

Ngoài ra còn có một quy tắc tập thể:

table.collapse (border-sập: sập;) table.separate (border-sập: riêng biệt;)

Kết quả:

chiều rộng và chiều cao
(chiều cao và chiều rộng bàn)

Giá trị:

Thí dụ:

căn chỉnh văn bản
(căn chỉnh ngang)

Giá trị:

  • center (căn giữa)
  • left (căn trái)
  • right (căn phải)
  • căn đều (chiều rộng)

căn chỉnh theo chiều dọc
(căn chỉnh dọc)

Giá trị:

  • đường cơ sở (đường cơ sở)
  • sub (dưới dạng subindex)
  • super (như chỉ số trên)
  • top (trên cùng)
  • giữa (giữa)
  • bottom (cạnh dưới)
  • % (chiều cao của khoảng cách dòng)

Thí dụ:

đệm lót
(đệm bàn)

background-color (nền)
màu sắc (màu văn bản)

Bố cục bảng CSS

Do số lượng lớn các thuộc tính của bảng và các biến thể trong thiết kế của chúng, bảng từ lâu đã trở thành một số tiêu chuẩn để bố trí các trang web. Nếu bạn ẩn các đường viền của bảng, thì bạn có thể sử dụng các ô riêng lẻ của nó làm các khối riêng biệt của trang: đầu trang, menu, chân trang, v.v.

Nhưng điều này không hoàn toàn chính xác, vì mỗi thẻ có mục đích riêng và các bảng không được cho là phục vụ cho việc bố trí trang. Tuy nhiên, việc thiếu một giải pháp thay thế đã khuyến khích các nhà thiết kế sử dụng loại phương pháp bố trí này.

Bây giờ có một cách khác - sử dụng các lớp, dần dần thay thế các bảng trong kiểu làm việc với một trang web. Tuy nhiên, trong thời đại của chúng ta, một số nhà thiết kế sử dụng thành công cách bố trí bảng.

Bố cục bảng tính hai cột

Một trong những phương pháp bố cục phổ biến nhất là hai cột, tức là trang được chia thành hai phần.

  • Thông thường phía bên trái là menu và các yếu tố bổ sung, và phía bên phải là phần chính cho nội dung chính.
  • Trong trường hợp này, chiều rộng của phía bên trái được đặt thành một giá trị nhất định, tức là khó và phía bên phải chiếm phần còn lại của trang.
  • Trong trường hợp này, bạn cần đặt tổng chiều rộng của toàn bộ bảng (thẻ bảng) theo phần trăm thông qua thuộc tính width (100%) và đối với ô đầu tiên (thẻ td), hãy đặt chiều rộng (cũng là thuộc tính width) theo pixel hoặc phần trăm.

    • Thí dụ: đặt khung chính của trang thành hai cột: cột đầu tiên - với kích thước cố định, cột thứ hai - cho phần còn lại của vùng trình duyệt. Thực hiện tác vụ bằng cách sử dụng kiểu CSS ()


    Hiệu suất:

    </ head\u003e <cơ thể\u003e <bảng id \u003d "maket" cellspacing \u003d "0"\u003e <tr\u003e <td id \u003d "left"\u003e1</ td\u003e <td id \u003d "right"\u003e2</ td\u003e </ tr\u003e </ table\u003e ...

    1
    ...

    Kết quả:

  • Bây giờ chúng ta hãy thử tách hai cột của bảng với nhau một cách trực quan.

    • Thí dụ: đặt nền khác của các ô (để phân tách hai cột với nhau) và đặt khoảng cách giữa các cột (dấu phân cách)


    Hiệu suất:
    Hãy thêm các thuộc tính kiểu mới:

    / * cho ô bên trái * / td # left (width: 200px; background: #ccc; border: 1px solid black; / * tạm thời biểu thị đường viền * /) / * cho ô bên phải * / td # right (background: # fc3; border: 1px đặc đen; / * tạm thời biểu thị đường viền * /) / * cho dấu phân cách * / #razdel (width: 10px; / * Khoảng cách giữa các cột * /)

    Cùng với nhau:

    </ head\u003e <cơ thể\u003e <bảng id \u003d "maket" cellspacing \u003d "0"\u003e <tr\u003e <td id \u003d "left"\u003e1</ td\u003e <td id \u003d "razdel"\u003e <td id \u003d "right"\u003e2</ td\u003e </ tr\u003e </ table\u003e

    1

    Một ô mới đã được thêm vào cho dấu phân cách.
    Kết quả:

  • Bạn cũng có thể làm cho dấu phân cách giữa các cột ít nổi bật hơn. Đối với điều này, chúng tôi sẽ sử dụng các kiểu đường viền.

    • Thí dụ: tạo dấu phân cách giữa các cột trong bảng bằng đường viền đứt nét của các ô liền kề


    Hiệu suất:
    Hãy thêm các thuộc tính đường viền mới cho các ô:

    / * cho ô bên trái * / td # left (width: 200px; background: #ccc; / * Màu nền của cột bên trái * / / * new * / border-right: 1px dashed # 000; / * Tùy chọn đường viền đứt nét phải * / )

    Cùng với nhau:

    </ head\u003e <cơ thể\u003e <bảng id \u003d "maket" cellspacing \u003d "0"\u003e <tr\u003e <td id \u003d "left"\u003e1</ td\u003e <td id \u003d "right"\u003e2</ td\u003e </ tr\u003e </ table\u003e

    1

    Kết quả:

    Bố cục bảng tính ba cột

    Có một khái niệm về bố cục cố định hoặc "linh hoạt".

    CSS bố cục cố định

    • Sử dụng bố cục cố định chiều rộng của toàn bộ bảng được đặt bằng pixel, và sau đó, bất kể độ phân giải của màn hình và cửa sổ trình duyệt, bảng sẽ luôn có cùng chiều rộng.
    • Trong trường hợp này chiều rộng của các cột còn lại cũng phải được cố định.
    • Bạn có thể bỏ đi chiều rộng của một ô, sau đó nó sẽ được tính toán tự động dựa trên kích thước của các ô còn lại và toàn bộ bảng.

    Thí dụ: tạo một mẫu trang có ba cột. Sử dụng bố cục bảng cố định:

    • cột bên trái - 150 pixel;
    • cột giữa - 400 pixel;

    Hiệu suất:

    </ head\u003e <cơ thể\u003e <bảng id \u003d "maket" cellspacing \u003d "0"\u003e <tr\u003e <td id \u003d "left"\u003e1</ td\u003e <td id \u003d "central"\u003e2</ td\u003e <td id \u003d "right"\u003e3</ td\u003e </ tr\u003e </ table\u003e

    1 2

    Kết quả:

    Bố trí cao su

    • Chiều rộng của cái bàn khi sử dụng thiết kế "cao su" đặt trong% chiều rộng của cửa sổ trình duyệt... Vì thế khi cửa sổ trình duyệt thay đổi, kích thước của bảng cũng thay đổi.
    • Chiều rộng của tất cả các ô có thể được cài đặt tính bằng phần trăm.
    • Tùy chọn thứ hai là khi chiều rộng của một số ô được thành lập tính bằng phần trămvà một số tính bằng pixel.

    Quan trọng: Tổng chiều rộng của tất cả các cột phải là 100%, bất kể chiều rộng của bảng.


    Thí dụ:

    • cột bên trái - 20%;
    • cột giữa - 40%;
    • cột bên phải - 40%;

    Đặt nền cho các cột và phân tách các cột một cách trực quan bằng đường viền.

    Hiệu suất:

    </ head\u003e <cơ thể\u003e <bảng id \u003d "maket" cellspacing \u003d "0"\u003e <tr\u003e <td id \u003d "left"\u003e1</ td\u003e <td id \u003d "central"\u003e2</ td\u003e <td id \u003d "right"\u003e3</ td\u003e </ tr\u003e </ table\u003e

    1 2

    Kết quả:

    Hãy xem xét tùy chọn thứ hai, khi chiều rộng của cột trung tâm được trình duyệt tự động chọn; một ví dụ là hình ảnh:

    Thí dụ: tạo một mẫu trang có ba cột. Sử dụng bố cục bàn linh hoạt:

    • cột bên trái - 150 pixel;
    • cột giữa - 40%;
    • cột bên phải - 200 pixel;

    Đặt nền cho các cột và phân tách các cột một cách trực quan bằng đường viền.


    Hiệu suất:

    </ head\u003e <cơ thể\u003e <bảng id \u003d "maket" cellspacing \u003d "0"\u003e <tr\u003e <td id \u003d "left"\u003e1</ td\u003e <td id \u003d "central"\u003e2</ td\u003e <td id \u003d "right"\u003e3</ td\u003e </ tr\u003e </ table\u003e

    1 2

    Kết quả:
    Kết quả sẽ xấp xỉ như nhau, chỉ xảy ra hiện tượng "giãn" do cột trung tâm.

    Sử dụng bảng lồng nhau trong một bố cục linh hoạt

    Nếu chiều rộng của hai cột được đặt theo tỷ lệ phần trăm và chiều rộng thứ ba bằng pixel, bạn không thể vượt qua bằng một bảng. Vì vậy, nếu chiều rộng của toàn bộ bảng là 100 phần trăm, cột đầu tiên là 200 pixel và các cột còn lại là 20 phần trăm, thì một phép tính đơn giản cho thấy kích thước của cột đầu tiên là 60 phần trăm. Trong trường hợp này, trình duyệt sẽ không chấp nhận giá trị được chỉ định bằng pixel và kích thước sẽ được đặt dưới dạng phần trăm.

    • Bảng gốc được tạo với hai ô. Chiều rộng bảng được đặt dưới dạng phần trăm.
    • Đối với ô bên trái (cột đầu tiên) chiều rộng được đặt tính bằng pixel.
    • Chiều rộng ô bên phải (đế cho các loa khác) không được chỉ định... Một bảng thứ hai được chèn vào bên trong ô này, cũng bao gồm hai ô.
    • Chiều rộng của các ô trong bảng lồng nhau được đặt dưới dạng phần trăm.
    • Chiều rộng bảng bên trong phải được đặt thành 100 phần trămđể bảng này chiếm tất cả không gian trống trong bảng bên ngoài.
    • Chiều rộng giữa và cột bên phải tương ứng với chiều rộng của ô, không phải của bảng bên ngoài nói chung.

    Thí dụ: tạo một mẫu trang có ba cột. Sử dụng bố cục linh hoạt với bảng lồng nhau:

    • cột bên trái - 150 pixel;
    • cột giữa - 60%;
    • cột bên phải - 40%;

    Đặt nền cho các cột.

    Hiệu suất:

    , do đó, trong trường hợp bắt buộc phải để ô không có nội dung nhưng hiển thị màu nền, một khoảng trắng không phân tách được () đã được thêm vào bên trong ô. Không phải lúc nào không gian cũng phù hợp, đặc biệt là khi bạn cần đặt chiều cao ô thành 1–2 pixel, đó là lý do tại sao hình ảnh trong suốt một pixel được sử dụng rộng rãi. Thật vậy, một bức tranh 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ẽ đơn pixel và tất cả các loại bộ đệm dựa trên chúng đã qua. Trình duyệt hoạt động đủ tốt với các bảng mà không có nội dung ô.

    Thuộc tính ô trống được sử dụng để kiểm soát sự xuất hiện của ô trống; khi được đặt thành ẩn, đường viền và nền trong ô trống sẽ không được hiển thị. Nếu tất cả các ô trong một hàng trống, thì toàn bộ hàng sẽ bị ẩn. Một ô đượ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 nguồn cấp dữ liệu dòng, tab hoặc khoảng trắng;
    • khả năng hiển thị được đặt thành ẩn.

    Thêm khoảng trắng không ngắt được coi là nội dung hiển thị, tức là ô sẽ không còn trống (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

    1
    2

    Thuộc tính thẻ cellpadding và cellspacing là bắt buộc ở đây để không có "khoảng cách" giữa các bảng.
    Kết quả:

    Bản thân các bảng trông khá "nghèo nàn", bên cạnh đó, các trình duyệt hiển thị một số đặc điểm của bảng theo cách riêng của chúng, đặc biệt là các khung. Tuy nhiên, những thiếu sót này có thể được sửa chữa dễ dàng bằng cách sử dụng sức mạnh của phong cách. Đồng thời, các công cụ để thiết kế bảng được mở rộng đáng kể, cho phép bạn phù hợp thành công các bảng với 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 một lúc được đặt thông qua thuộc tính nền, được áp dụng cho bộ chọn TABLE. Khi làm như vậy, bạn nên nhớ các quy tắc sử dụng kiểu, cụ thể là, kế thừa thuộc tính của các phần tử. Mặc dù thuộc tính nền không được kế thừa, giá trị nền mặc định cho các ô là trong suốt, tức là trong suốt, vì vậy 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 cho 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 đề 1Tiêu đề 2
    Ô 3Ô 4


    Trong ví dụ này, chúng ta sẽ nhận được màu nền xanh lam cho các ô (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, vì vậy nền của bộ chọn gốc, trong trường hợp này, bộ chọn BẢNG, được "đọc lướt qua". Và màu cho bộ chọn TD được chỉ định rõ ràng, vì vậy các ô được "tô" bằng màu xanh lam.

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

    Nhân vật: 2.4. Thay đổi màu nền

    Lề trong ô

    Lề là khoảng cách giữa cạnh của nội dung ô và đường viền của nó. 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ề tính bằng pixel trên tất cả các mặt của ô. Nó được phép 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 đề 1Tiêu đề 2
    Ô 3Ô 4


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

    Nhân vật: 2.5. Các trường trong ô

    Nếu thuộc tính kiểu padding được áp dụng cho các ô trong bảng, thì hành động của thuộc tính cellpadding 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 áp dụng thuộc tính cellspacing của thẻ

    ... Tác dụng của thuộc tính này có thể nhìn thấy rõ ràng khi sử dụng đường viền xung quanh ô hoặc khi tô các ô bằng màu nổi bật trên nền của trang. Thuộc tính kiểu khoảng cách đường viền hoạt động như một sự thay thế cho khoảng cách ô, nó đặt khoảng cách giữa các đường viền của các ô. Một giá trị đặt cả khoảng cách dọc và ngang giữa các đường 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 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 dọc (trên và dưới).

    Thuộc tính giãn cách đường viền chỉ có hiệu lực nếu thuộc tính thu gọn đường viền không được đặt cho bộ chọn TABLE với giá trị thu gọn (ví dụ 2.5).

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

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

    Thay thế cellspacing

    Leonardo58
    Raphael411
    Michelangelo249
    Donatello213


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

    Nhân vật: 2.6. Chế độ xem bảng khi sử dụng khoảng cách đường viền

    Internet Explorer cho đế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 các bảng sẽ sử dụng khoảng cách ô mặc định (thường là 2px) cho các bảng.

    Khi bạn 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ị giãn cách đường viền sẽ bị xóa.

    Đường viền và khung

    Theo mặc định, ban đầu không có đường viền trong bảng và nó được thêm vào bằng cách sử dụng thuộc tính border của thẻ

    ... Các trình duyệt hiển thị đường viền như vậy theo những cách khác nhau, vì vậy tốt hơn hết bạn không nên chỉ định thuộc tính này và để bản 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 cellspacing

    Thuộc tính cellspacing của thẻ được biết là

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

    Lưu ý rằng đây không phải là cách rất thuận tiện để tạo đường viền, vì nó có phạm vi hạn chế. Bằng cách này, bạn chỉ có thể có được một lưới một màu, không có các đường dọc hoặc ngang ở đúng vị trí.

    Áp dụng thuộc tính biên giới

    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 phần tử. Khi bạn cần tạo các đường riêng biệt ở các cạnh khác nhau, tốt hơn nên 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 tôi thêm đường viền xung quanh bảng nói chung và đối với bộ chọn TD hoặc TH, chúng tôi thêm đường viền xung quanh các ô (ví dụ 2.6).

    Ví dụ 2.6. Thêm đường viền đôi

    XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

    Những cái bàn

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


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

    Nhân vật: 2.7. Viền xung quanh bảng và các ô

    Xin lưu ý rằng các đường kép được hình thành ở nơi nối các ô. Chúng được lấy lại bằng hành động của thuộc tính cellspacing 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 hỏi
    , thì chúng ta nhận được không phải đường gấp đôi, mà là đường đơn, nhưng độ 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 hình duy nhất

    XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

    Những cái bàn

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


    Ví dụ này tạo một đường liền nét màu xanh lá cây giữa các ô và một đường liền nét 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ả ví dụ được hiển thị trong Hình. 2.8.

    Nhân vật: 2.8. Đường viền quanh bàn

    Căn chỉnh nội dung của ô

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

    		, nó xác định một tiêu đề trong đó căn chỉnh được căn giữa. Để thay đổi 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 của các ô 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 trái và nội dung của thẻ - ở Trung tâm. Kết quả của ví dụ được hiển thị bên dưới (Hình 2.9).

    Nhân vật: 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 là đối với các bảng trong đó nội dung của các ô khác nhau về chiều cao. 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 căn chỉnh theo chiều dọc, như thể hiện trong Ví dụ 2.9.

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

    XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

    Những cái bàn

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


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

    		là 40 pixel và văn bản được căn chỉnh xuống dưới cùng. Kết quả ví dụ được hiển thị trong Hình. 2.10.

    Nhân vật: 2.10. Căn chỉnh văn bản trong ô

    Ô trống

    Các trình duyệt hiển thị một ô khác nhau mà không có gì bên trong. "Không có gì" trong trường hợp này có nghĩa là không có hình ảnh hoặc văn bản nào được thêm vào bên trong ô và không gian không được tính đến. Đương nhiên, sự xuất hiện của các ô chỉ khác nhau nếu một đường viền được thiết lập xung quanh chúng. Khi sử dụng một đường viền vô hình, sự xuất hiện của các ô, cho dù có thứ gì đó trong chúng 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 ô xem trống

    Leonardo58
    Raphael 11
    Michelangelo24
    Donatello 13


    Chế độ xem bảng trong trình duyệt Safari được hiển thị trong Hình. 2.11a. Bảng tương tự trong IE7 được hiển thị trong Hình. 2.11b.

    và. Trong trình duyệt Safari, Firefox, Opera, IE8, IE9

    b. Trong trình duyệt IE7

    Nhân vật: 2.11. Chế độ xem bảng với các ô trống




    Những bài viết liên quan

    Bài viết mới nhất
    Các bài viết phổ biến
    Lựa chọn của người biên tập

    Trang web trợ giúp máy tính

    © Bản quyền 2020,
    rzdoro.ru - Trang web trợ giúp máy tính

    • Thể loại
    • Máy tính xách tay
    • Windows 8
    • Video âm thanh
    • Dụng cụ
    • miscellanea
    • Linux
    • Internet
    • Microsoft Office
    rzdoro.ru