Bảng HTML sang bảng wiki

Cách dễ nhất để nhập nội dung từ một trang web vào UBC Wiki là chuyển đổi mã HTML thành Wiki Syntax. Xin lưu ý về bản quyền

Vì việc chỉnh sửa kết quả thường xuyên là cần thiết, bạn nên làm quen với các thẻ HTML cơ bản và mã wiki trước khi thử chuyển đổi thành mã đánh dấu MediaWiki

Hướng dẫn từng bước

  1. Mở một trong các trình chuyển đổi từ danh sách bên dưới
  2. Trong tab hoặc cửa sổ mới, hãy mở trang web mà bạn muốn nhập vào UBC Wiki
  3. Bước tiếp theo này phụ thuộc vào trình chuyển đổi bạn đã mở. làm một điều trong số sau đây
    • Xem nguồn trang (trong menu chuột phải). Sau đó, sao chép/dán mã có liên quan (chỉ phần nội dung, không phải toàn bộ trang (xem ghi chú bên dưới)) vào hộp (trên cùng) của trình chuyển đổi
    • Hoặc sao chép liên kết trong hộp "Tìm nạp từ URL". Trong trường hợp này, bạn sẽ cần xóa đầu trang và chân trang
    • Ghi chú. Nói chung, đối với trang UBC, nội dung bạn muốn giữ nằm giữa và
  4. Cài đặt (nếu có)
    • Phương ngữ Wiki = MediaWiki
    • Mã hóa các thực thể HTML = không được chọn
  5. Nhấp vào nút "Chuyển đổi HTML sang đánh dấu wiki" (nếu nó không hoạt động, hãy sử dụng tùy chọn "Tìm nạp từ URL" hoặc một trình chuyển đổi HTML khác)
  6. Sao chép/dán văn bản kết quả vào hộp chỉnh sửa của trang wiki bạn đã tạo
  7. Xem trước trang và kiểm tra xem mọi thứ có đúng không
    • Hầu hết các lỗi sẽ rất dễ sửa, đôi khi dòng đầu tiên của bảng không nằm trên một dòng mới hoặc liên kết bắt đầu và kết thúc ở sai vị trí (chỉ cần di chuyển dấu ngoặc vuông)
    • Ví dụ: nếu bạn nhận được các ký tự vui nhộn thay cho dấu nháy đơn, giải pháp dễ nhất/nhanh nhất là sao chép và dán mã wiki vào trình soạn thảo văn bản và sử dụng tùy chọn "Thay thế tất cả". " chức năng
    • Nếu bạn còn nhiều HTML và/hoặc có gì đó không ổn, hãy sao chép và dán mã wiki vào công cụ Strip HTML và cũng sao chép phần sau vào hộp "Cho phép thẻ".
      (you may not want all of these, particularly blockquote) You can then copy and paste the code that tool gives you back into the wiki editing box.
  8. Cứu
  • Xin lưu ý. Hình ảnh sẽ cần phải được tải lên vì chỉ các trình giữ chỗ được tạo trong mã

Bộ chuyển đổi cú pháp HTML sang Wiki trực tuyến

Khuyến khích

Người khác

Bảng cho phép chúng ta cấu trúc dữ liệu trên màn hình thành các hàng và cột gọn gàng. Điều này rất hữu ích trong nhiều tình huống. Trên thực tế, nhiều cấu trúc dạng hộp khác trên các trang web sử dụng bảng làm cơ sở

Các bảng wikitext dựa trên các bảng HTML. Nếu bạn quen thuộc với HTML, bạn có thể vui khi biết rằng bạn có thể sử dụng các bảng HTML trong các trang Wiki. Tuy nhiên, mã đánh dấu wiki, như tên gọi của nó, sử dụng ít ký tự hơn và không sử dụng thẻ đóng. Các bảng wikitext khá cơ bản ở dạng đơn giản nhất, nhưng giống như các bảng tương đương HTML của chúng, chúng có thể được định dạng ở mức độ lớn bằng cách bổ sung các thuộc tính HTML và kiểu CSS. Trang này giải thích cách tạo bảng

Đối với những người chỉ cần một bảng Wikitext hoặc HTML nhanh để họ có thể sửa đổi cho công việc của mình, hãy tham khảo Bảng sẵn sàng để sử dụng

Đây là một ví dụ bảng cơ bản

{| class="wikitable" |+ Caption |-  ! Heading 1  ! Heading 2 |- | A | B |- | C | D |}

CaptionHeading 1Heading 2ABCD

  • Các ký hiệu dấu ngoặc nhọn và đường ống bên ngoài biểu thị một bảng
  • Các ký hiệu dấu gạch nối biểu thị một hàng mới
  • Các ký hiệu đường ống tự biểu thị một ô dữ liệu
  • Dấu chấm than biểu thị các ô tiêu đề
  • Các ký hiệu ống và dấu cộng biểu thị chú thích bảng

Lưu ý rằng bảng đã được cung cấp các đường viền và định dạng tiêu chuẩn bằng cách sử dụng |- style="background:lightgray;" | style="border:3px solid darkred;"|Cell B1 Text || align=left| Cell B2 Text 8; . Trên thực tế, các thuộc tính được xác định ở nơi khác, trong biểu định kiểu Wiki, đã căn giữa các ô tiêu đề và làm cho chúng được in đậm. Các điều kiện mặc định tương tự đã làm cho màu nền của bảng là màu trắng, văn bản màu đen và đặt chú thích của bảng ở trên cùng

Cũng lưu ý rằng các cột của bảng cơ bản mở rộng để chứa văn bản rộng nhất. Nếu một số ô của bảng bị bỏ trống thì các cột có thể trở nên rất hẹp. Người dùng thường đặt các ký tự ẩn đặc biệt vào các ô để mở rộng các cột đó. Ký tự được sử dụng là khoảng trắng không ngắt, được gọi như vậy vì mục đích ban đầu của nó là giữ hai từ bất kỳ với nhau được liên kết bởi nó

Những bảng đơn giản này không có bất kỳ lề nào xung quanh chúng để tạo khoảng cách giữa chúng với văn bản khác. Để đảm bảo rằng chúng không bị lẫn lộn với các phần khác của trang này, chúng có thể được đặt trước và theo sau bằng mã
Bản mẫu {{clear}} thường tồn tại để làm điều tương tự với ít đánh dấu hơn. Điều này đảm bảo rằng cả bảng và bất kỳ văn bản nào theo sau nó đều bắt đầu trên các dòng mới của riêng chúng. Các bảng cũng có thể bao gồm các kiểu lề thực hiện giãn cách này

Có thể sao chép và dán mã bảng đơn giản này hoặc bất kỳ mã nào khác được sử dụng trong các ví dụ vào Hộp cát hoặc vào các trang khác để thử nghiệm và mở rộng. Để mở rộng một bảng như vậy, chỉ cần thêm nhiều hàng và ô dữ liệu

Có hai cách bố trí bảng khác hoạt động trong các trang Wiki; . Danh sách đầu tiên khá giống nhau nhưng viết mã ô cho một hàng trong một dòng. Lưu ý rằng có một biểu tượng ống kép được sử dụng cho dấu phân cách ô. Khi các ô tiêu đề được sắp xếp theo cách này, dấu chấm than kép được sử dụng thay vì dấu gạch ngang kép

Danh sách thứ hai tương đương với HTML của bảng mã wiki và đôi khi dễ sử dụng hơn khi bảng đó được hiển thị theo mẫu. Thực tế là các ký hiệu ống của các bảng Wiki có thể xung đột với các ký hiệu khác như vậy trong các bản mẫu và việc sử dụng các bảng HTML là một phương pháp để tránh những vấn đề như vậy. Khi các bảng HTML được sử dụng, chúng có các quy tắc cú pháp tự do hơn;

lưu ý kỹ thuật. Cũng nên biết rằng các bảng HTML có thể được tạo trong một số trình soạn thảo HTML và chúng thường được cung cấp miễn phí trên internet. Internet cũng cung cấp việc sử dụng các trình chuyển đổi HTML sang Wikitext cho mã, nhưng không cho phép chuyển đổi ngược lại. Vì vậy, đối với một số trường hợp cần cả phiên bản Wikitext và phiên bản HTML của cùng một bảng, tốt nhất nên tạo phiên bản HTML trước, sau đó chỉ cần chuyển đổi nó thành Wiki

Thuật ngữ được thấy trong mã, class="wikitable", được gọi là thuộc tính HTML và áp dụng các quy tắc định dạng tiêu chuẩn cho wikitable để làm cho các ví dụ này rõ ràng hơn. Cũng lưu ý rằng các định dạng hơi khác nhau; . Các thuộc tính và các kiểu khác sẽ được thảo luận trong phần tiếp theo

{| class="wikitable" |+ Caption |-  ! Heading 1!! Heading 2 |- | A || B |- | C || D |}

Caption Heading 1 Heading 2 A B C D

  • Các thành phần bảng bắt đầu trên các dòng mới có thể được thụt vào
  • Khoảng cách dòng giữa các phần tử như vậy thường không được phép
  • Các bảng có các thuộc tính HTML sửa đổi của riêng chúng, e. g. đường viền, chiều rộng và căn chỉnh, v.v. , cũng như hầu hết các phần tử HTML
  • Ngoài ra, các bảng có thể được thay đổi bằng các lớp, ID và kiểu. Hẹn gặp lại
  • Các bảng được hiển thị trong các mẫu được tạo tốt nhất bằng HTML
  • Các ô tiêu đề Wiki có sẵn các kiểu;

Các bảng HTML cần văn bản trong các ô của chúng được hiển thị chính xác. Nếu dự định là một ô trống thì hãy nhập một khoảng trắng không ngắt,  , để tránh sự cố

Các bảng đơn giản được hiển thị ở trên có thể được sử dụng như hiện tại, nhưng sớm hay muộn người dùng của chúng sẽ cần phải áp dụng một số định dạng bổ sung. Để mở rộng cấu trúc của bảng, nhiều người chỉ cần thêm các hàng mới với các ô của chúng hoặc các ô bổ sung trong các hàng hiện có. Những phương pháp này có giá trị, vì màu sắc và định dạng có thể được bảo tồn. Khi cần một bảng đầy tham vọng hơn thì thông tin trong phần này sẽ hữu ích

  • Kiểu bảng là tập hợp các hướng dẫn hoặc quy tắc bổ sung định dạng cho tác phẩm,
  • Các kiểu có thể được chỉ định và đặt tên trong danh sách biểu định kiểu được gọi là các lớp. Sau đó, một khai báo lớp được thực hiện trong dòng bảng, nghĩa là viết tên lớp gọi nó vào sử dụng. Tác dụng của việc này là áp dụng tất cả các kiểu trong lớp đã đặt tên cho bảng. Một ví dụ về khai báo lớp bảng như vậy là |- style="background:lightgray;" | style="border:3px solid darkred;"|Cell B1 Text || align=left| Cell B2 Text 8
  • Các kiểu cũng có thể được chỉ định đầy đủ trong các bảng;
  • Người dùng Wikitext sử dụng các kiểu nội tuyến vì có ít lớp hữu ích để định dạng bảng;
  • Quy tắc kiểu có thể được sử dụng để định dạng tất cả các phần của bảng
  • Thuộc tính HTML cũng có thể được sử dụng, nhưng định dạng của chúng khác với định dạng của kiểu CSS. Nhiều thứ hiện đã lỗi thời, vì vậy hãy luôn xem xét CSS trước
  • Các kiểu và thuộc tính có thể được sử dụng kết hợp để có hiệu quả tốt

Các định dạng chung để viết các kiểu này có thể được tìm thấy trong hộp thả xuống Định dạng Kiểu bên dưới và bản tóm tắt các thuộc tính có thể được tìm thấy trong một kiểu khác. Các phần của trang này chứa nhiều ví dụ về mã minh họa cách đặt các kiểu cho một hiệu ứng nhất định và người đọc mới làm quen với chủ đề này nên tuân theo cách diễn đạt của mã để hiểu rõ nhất. Bạn có thể tìm thêm thông tin về mức độ ưu tiên của các kiểu trong trang Wikibooks The CSS Cascade, mặc dù công việc có thể nhiều hơn mức cần thiết cho sự hiểu biết cơ bản

định dạng phong cách

Nơi đặt các kiểu

Các kiểu được viết với một mức bảng cụ thể trong tâm trí. Ví dụ: màu nền của ô sẽ được viết ở cấp độ ô và màu nền của bảng tổng quát hơn sẽ được viết ở cấp độ bảng. Nền hàng riêng biệt cũng có thể được đặt với kiểu ở cấp độ hàng

Có thể cần lưu ý rằng kiểu của một hàng có thể được đặt để thay đổi tất cả các ô của nó cùng một lúc nhưng chỉ một số định dạng khác nhau có thể được sử dụng theo cách này; . Điều này có thể làm cho một số công việc khá tốn thời gian. Các định dạng cho phép nó là những định dạng ảnh hưởng đến màu sắc, phông chữ và căn chỉnh văn bản;

Trong Wikitext, danh sách thuộc tính và biểu thức kiểu CSS được đặt ngay sau biểu tượng tạo bảng, hàng hoặc ô đó. Ví dụ sẽ được tìm thấy trong suốt văn bản chính. Khi một lớp được chỉ định cho một bảng, (một tập hợp các kiểu được đóng gói sẵn), nó được viết trong dòng bảng. Điều này thường xảy ra ngay cả khi lớp bao gồm các kiểu dành cho cấp thấp hơn. Ví dụ sau đây cho thấy mã hóa mẫu cho một bảng có lớp WIKITABLE và với các kiểu trong mỗi thành phần có liên quan của nó. Có thể cần lưu ý rằng các kiểu tiêu đề bị bỏ qua trong ví dụ này sẽ khiến màu tím của WIKITABLE sẽ chiếm ưu thế ở đó; . Lưu ý rằng các kiểu được phân tách khỏi văn bản ô bằng ký hiệu ống

{| class="wikitable" align=center width=50% style="background:lightyellow;color:maroon;" |+ style="font-weight:bold;"|Caption Text |- ! style="background:brown;color:white;"| Heading 1 ! style="background:brown;color:white;"| Heading 2 |- | Cell A1 Text||Cell A2 Text |- style="background:lightgray;" | style="border:3px solid darkred;"|Cell B1 Text | Cell B2 Text |}

Cái bàn trông như thế này

Chú thích Văn bản Tiêu đề 1 Tiêu đề 2 Ô A1 TextCell A2 TextCell B1 TextCell B2 Văn bản

Bố cục thay thế cho các hàng Tất cả trong một dòng

Để thêm các kiểu hoặc thuộc tính cho các ô trong bảng đó bằng cách sử dụng ký hiệu thay thế tất cả các ô trong một dòng, hãy sử dụng định dạng điển hình sau

|- style="background:lightgray;" | style="border:3px solid darkred;"|Cell B1 Text || align=left| Cell B2 Text

Lưu ý rằng các kiểu và văn bản dữ liệu vẫn được phân tách bằng ký hiệu ống và ký hiệu ống kép tách biệt các chi tiết cho ô tiếp theo. Các ô khác cùng hàng vẫn có thể chiếm dòng tiếp theo nếu cần

Ý tưởng tương tự được áp dụng cho các tiêu đề ở định dạng thay thế trông như thế này

|- ! align=left| Heading 1 !! style="font-family:courier;"| Heading 2

Lưu ý rằng dấu chấm than kép phân tách các mô tả ô tiêu đề và biểu tượng đường ống phân tách kiểu của từng tiêu đề khỏi dữ liệu của nó

Có thể xem nhiều ví dụ về các bảng HTML và mã hóa tương đương Wikitext của chúng trên trang Các bảng đã sẵn sàng để sử dụng


Định dạng cho các thuộc tính HTML

Các thuộc tính HTML bao gồm các mục như cellpadding, cellspacing và align. Ngoài ra còn có một số cách khác áp dụng cho bảng và bạn có thể tìm thấy danh sách đầy đủ những cách khác dành cho bảng trong phần tóm tắt hộp thả xuống liền kề. Tất cả chúng đều sử dụng hai thuật ngữ được phân tách bằng dấu bằng và thông thường một số mục như vậy được đặt trong dòng bảng. Định dạng chung là

attribute1=value1 attribute2=value2 attributeN=valueN

Lưu ý trong ví dụ trên rằng các quy tắc được phân tách bằng dấu cách. Một danh sách khác, lần này với một ví dụ thực tế cho ba thuộc tính được đề cập là

cellpadding=10px cellspacing=8px align=center


Định dạng cho các kiểu CSS

Các kiểu CSS có nhiều quy tắc định dạng hơn các thuộc tính HTML. Chúng bao gồm tất cả các mục tô màu, phông chữ, khoảng cách, phần đệm, lề và các mục khác. Thường có một vài trong số này trong một phần tử bảng, với dòng bảng chứa hầu hết. Định dạng chung là

style = "property1:value1; property2:value2; .. propertyN:valueN;"

Lưu ý từ mẫu chung trên

  • Mỗi quy tắc kiểu bao gồm một thuộc tính và một giá trị
  • Dấu phân cách giữa các thuộc tính và giá trị là dấu hai chấm đầy đủ
  • Dấu phân cách giữa các quy tắc kiểu là dấu chấm phẩy
  • Toàn bộ bộ quy tắc được đặt trong dấu ngoặc kép
  • Tập hợp tạo thành vế phải của biểu thức tương đương với kiểu

Một danh sách khác, có thể được đặt trong phần tử bảng, phần tử hàng hoặc phần tử ô, để đặt màu nền và màu văn bản của chúng, chỉ là

style="background:lightyellow; color:royalblue;"

Lưu ý rằng tên màu đã được sử dụng và mỗi tên được đánh vần là một từ. Hai phương pháp định dạng được trộn lẫn thường xuyên trong cùng một dòng như sau

{| class="wikitable" |+ Caption |-  ! Heading 1!! Heading 2 |- | A || B |- | C || D |} 0


Quy tắc chấm câu cho Style Expressions

Đôi khi các quy tắc kiểu trông hơi nhỏ gọn và cần được trải ra để dễ đọc hơn và để cung cấp các điểm ngắt thuận tiện cho việc ngắt dòng văn bản. Những ghi chú này áp dụng cho dấu câu trong biểu thức kiểu CSS

Những điểm chính cần tránh

  • Ngắt dòng không được phép trong các biểu thức kiểu
  • Dấu hai chấm và dấu chấm phẩy không được có khoảng trắng trước chúng

Chúng có Vĩ độ

  • Khoảng cách sau dấu hai chấm và dấu chấm phẩy là được
  • Khoảng cách giữa biểu tượng bảng, hàng hoặc ô và kiểu từ là OK
  • Không gian xung quanh bất kỳ biểu tượng bằng nào là OK
  • Không gian giữa các quy tắc kiểu và dấu ngoặc kép của chúng là OK
  • Theo tùy chọn, có thể đặt dấu chấm phẩy ngay sau quy tắc kiểu cuối cùng

Ngoài ra

  • Các giá trị gộp như |- ! align=left| Heading 1 !! style="font-family:courier;"| Heading 2 1 phải được phân tách bằng dấu cách
  • Các thuộc tính phải được phân tách khỏi các biểu thức kiểu CSS bằng dấu cách
Tóm tắt thuộc tính CSSCác quy tắc kiểu thường được sử dụng cho các bảng đánh dấu Wiki

Có hai bộ quy tắc phong cách khác nhau được sử dụng;

Mỗi bảng, chú thích, hàng và ô có thể được coi là các thành phần riêng biệt trong việc xây dựng bảng tổng quát hơn. Trong mỗi trường hợp một thuộc tính đề cập đến cùng định dạng với một thuộc tính CSS ở cùng cấp độ của cùng một phần tử, thuộc tính CSS sẽ được ưu tiên

Một danh sách ngắn của từng bộ kiểu được đưa ra để tham khảo nhanh mặc dù những danh sách này không có nghĩa là hoàn chỉnh. Một liên kết đã được cung cấp ở cuối danh sách thả xuống này để tham khảo các thuộc tính CSS đầy đủ


Thuộc tính HTML cho bảng;

thuộc tính1=giá trị1 thuộc tính2=giá trị2 thuộc tínhN=giá trịN

{| class="wikitable" |+ Caption |-  ! Heading 1!! Heading 2 |- | A || B |- | C || D |} 1


Quy tắc kiểu CSS;

phong cách = "tài sản1. giá trị1; . giá trị2; . giá trịN;"

{| class="wikitable" |+ Caption |-  ! Heading 1!! Heading 2 |- | A || B |- | C || D |} 2


Ưu tiên cho Kiểu nội tuyến.

Khi có sự cạnh tranh ngang cấp giữa thuộc tính và kiểu dáng, kiểu dáng đó sẽ được ưu tiên.

Khi tồn tại hai thuộc tính giống nhau trong một biểu thức kiểu, mỗi thuộc tính có một giá trị khác nhau, giá trị thứ hai sẽ được lấy.

Khi có hai biểu thức kiểu hoàn chỉnh trong cùng một dòng bảng, biểu thức thứ hai sẽ bị bỏ qua. Tình huống tương tự áp dụng cho hai thuộc tính giống nhau trong một dòng; .

Tham khảo Danh sách tham chiếu CSS để biết thêm mô tả chi tiết về các thuộc tính và giá trị.


Có thể xem nhiều ví dụ về các bảng HTML và mã hóa tương đương Wikitext của chúng trên trang Các bảng đã sẵn sàng để sử dụng. Đôi khi, việc hiểu một điểm cụ thể từ các ví dụ như vậy sẽ dễ dàng hơn hoặc nhớ lại các chi tiết đã học

Khi các kiểu cho các định dạng tương tự được ghi vào các phần khác nhau, (các phần tử) của bảng, một bộ định dạng có thể xung đột với một bộ định dạng khác. Nói chung, bất kỳ định dạng nào gần văn bản trong ô hơn sẽ thay thế các định dạng tương tự ở xa nó hơn

Ví dụ: nếu màu nền của bảng được đặt thành màu đỏ bằng cách sử dụng biểu thức kiểu trong dòng bảng, thì một biểu thức khác trong ô có thể chỉ định màu ô là xanh lam. Màu của một hàng cũng có thể được chỉ định khác. Theo quy tắc ưu tiên, chỉ một số phần sẽ bị ảnh hưởng và các phần còn lại của bảng sẽ giữ nguyên màu đã đặt cho chúng trong dòng bảng. Những ưu tiên đơn giản được liệt kê ở đây

  • Các kiểu được viết trong các ô sẽ thay thế các kiểu tương tự được áp dụng ở cấp độ hàng hoặc bảng
  • Các kiểu được viết theo hàng thay thế các kiểu tương tự được áp dụng ở cấp độ bảng
  • Kiểu CSS được ưu tiên hơn thuộc tính HTML khi cả hai đều ở cùng cấp độ. Ví dụ: nếu thuộc tính lề CSS đặt một bảng gần lề trái của trang, thì việc căn giữa bảng bổ sung với thuộc tính căn chỉnh sẽ bị bỏ qua. Mặc dù các định dạng này không giống nhau, nhưng vị trí CSS ngụ ý có mức độ ưu tiên cao hơn vị trí của thuộc tính ở cùng cấp độ
  • Các thuộc tính đôi khi có thể có mức độ ưu tiên. Điều này chỉ có thể xảy ra nếu thuộc tính ở mức bảng gần văn bản hơn. Ví dụ. nếu kiểu CSS cấp bảng đặt văn bản thành căn phải và thuộc tính ô căn giữa văn bản đó, thì ô sẽ có văn bản căn giữa trong khi phần còn lại của bảng sẽ được căn phải
  • Các kiểu CSS của khai báo lớp có thể được sửa đổi bằng các kiểu CSS nội tuyến ở mức thích hợp trong bảng, mặc dù các thuộc tính không thể ghi đè các kiểu này. Tất nhiên, các thuộc tính có thể áp dụng cho các kiểu hoàn toàn không được chỉ định bởi lớp. Bản chất của các lớp được mô tả trong trang WikiBooks Ghi chú về Lớp và Kiểu

Nếu những ưu tiên này có vẻ phức tạp, thì chúng sẽ dễ hiểu hơn trong thực tế. Trong bảng sau đây, một số màu văn bản được áp dụng ở mỗi cấp độ bảng, hàng và ô. Để giúp hiểu hệ thống phân cấp cơ bản, hãy tham khảo mô-đun mã bên dưới trong khi làm theo các điểm này

  • Màu mặc định cho văn bản của bảng là màu đen. Điều này không rõ ràng trong mã nhưng là hệ quả của biểu định kiểu Wiki
  • Một khai báo lớp CSS, |- ! align=left| Heading 1 !! style="font-family:courier;"| Heading 2 2, áp dụng nhiều kiểu khác nhau cho bảng cùng một lúc, bao gồm cả nền màu xám. Nó cũng sử dụng một màu văn bản màu đen
  • Kiểu bảng áp dụng văn bản màu đỏ cho toàn bộ bảng. Nếu không có mã khác, tất cả văn bản sẽ có màu đỏ
  • Kiểu hàng áp dụng văn bản màu lam cho hàng thứ hai và màu lục cho hàng thứ ba. Vì các hàng có mức độ ưu tiên cao hơn bảng nên chúng thay đổi màu văn bản
  • Kiểu ô áp dụng văn bản màu hạt dẻ cho hai ô. Các mức ô có mức độ ưu tiên cao hơn so với bảng hoặc hàng và thậm chí có thể thay đổi một số phần nhất định nhiều hơn
  • Kiểu càng gần với văn bản thì mức độ ưu tiên của nó trong việc đặt định dạng càng cao. Các định dạng khác được áp dụng trực tiếp vào dữ liệu bằng các thẻ HTML hoặc wikitext cũng có thể

{| class="wikitable" |+ Caption |-  ! Heading 1!! Heading 2 |- | A || B |- | C || D |} 3

A1. Maroon Cell StyleA2. Kiểu bàn màu đỏB1. Maroon Cell StyleB2. Kiểu hàng xanh C1. Kiểu Hàng XanhC2. Kiểu hàng xanhD1. Kiểu bàn màu đỏD2. Kiểu bàn màu đỏ

Mô tả về mức độ ưu tiên CSS này đã bị hạn chế có chủ ý. Cài đặt mức độ ưu tiên CSS rất phức tạp và được xác định bởi nhiều yếu tố. Vị trí mà các kiểu được viết trong trang web hoặc các biểu định kiểu khác nhau của nó có ảnh hưởng, cái gọi là nguồn của các kiểu và có một hệ thống phân cấp cho các nguồn này. Ví dụ: các kiểu quan trọng của biểu định kiểu người dùng được đặt cao hơn bất kỳ kiểu tác giả nào. Ngoài ra, trong mỗi bộ sưu tập kiểu tồn tại từ một nguồn nhất định, có các ưu tiên khác được đặt; . ). Ngoài ra còn có một quy tắc đối với các kiểu trùng lặp xung đột và đôi khi, chỉ trình tự công việc của trình duyệt mới quyết định kiểu nào trong số các kiểu tương tự sẽ được sử dụng. Tổng quan về cách các ưu tiên CSS hoạt động cho các trang web được đưa ra trong The CSS Cascade. }}

Mã hóa bảng cần có kiến ​​thức cơ bản về không gian bảng

Không gian bảng chỉ là các thành phần chính của bảng và các phần có thể điều chỉnh bên trong nó. Phần ngắn này giải thích thuật ngữ của bảng và đưa ra một số ý tưởng về bản chất của định dạng của nó

Tham khảo drop-box The Table Design Spaces để biết văn bản

thẻ, lại là dòng thứ hai của bảng
  • Các đường viền không hoàn toàn là không gian bàn nhưng ngoài mục đích rõ ràng của chúng là tạo ra các không gian khác nhau, chúng còn được sử dụng để trang trí theo đúng nghĩa của chúng. Các kiểu CSS đường viền chỉ được đặt trong dòng bảng cho chu vi của bảng. Đối với các ô, chúng phải được đặt cho từng ô. Ngoài ra còn có mã CSS để đặt mỗi bên khác nhau
Ngoài ra còn có một thuộc tính HTML cho đường kẻ của bảng để tạo các đường viền bao quanh đồng nhất đơn giản và nó giúp tiết kiệm nhiều công việc cho các bảng lớn và cho các ứng dụng ít đòi hỏi hơn. Một phong cách điển hình và một thuộc tính được hiển thị bên dưới

|- ! align=left| Heading 1 !! style="font-family:courier;"| Heading 2 3

Thuộc tính thường là. Mỗi không gian bảng khác nhau được thảo luận riêng trong phần còn lại của trang này. Không gian thiết kế bảng

Không gian thiết kế bảng

Bàn có một số khoảng trống cần được chú ý trong thiết kế; . Tham khảo hình ảnh ở trên và các mô tả bên dưới để biết chi tiết

  • Lề đặt khoảng cách giữa bảng và các mục liền kề trên một trang và bốn mặt của bảng có thể có các lề khác nhau. Trên thực tế, các lề có thể được tạo thành các giá trị âm để khiến các bảng chồng lên nhau một phần. Ngoài lề, còn có các thuộc tính căn chỉnh có thể căn giữa bảng hoặc định vị bảng ở bên trái hoặc bên phải (|- ! align=left| Heading 1 !! style="font-family:courier;"| Heading 2 4. ), mặc dù thuộc tính này thiếu ưu tiên so với kiểu CSS. Lề không được hiển thị trên đồ họa trên, mặc dù quy tắc kiểu dáng cho đường kẻ bảng có dạng này

|- ! align=left| Heading 1 !! style="font-family:courier;"| Heading 2 5

Mã này áp dụng lề bảng cho cả bốn mặt cùng một lúc. Chuỗi giá trị tương ứng với top, right, bottom, rồi left. Trình tự này cũng được sử dụng để đệm
  • Phần đệm của bảng mô tả một khu vực ngay trong chu vi của bảng chính. (Không gian bảng A trong hình). Nó được sử dụng để cải thiện hình thức của bảng khi nội dung trông hơi chật chội. Nó cũng có thể được chỉ định cho tất cả các bên riêng biệt hoặc cùng nhau. Thuộc tính này được đặt trong dòng bảng, nhưng chỉ có thể được sử dụng khi khoảng cách ô không được thu gọn; . Việc sử dụng phần đệm bảng tương đối hiếm, không giống như thuộc tính tương tự được sử dụng ở cấp độ ô. Một số trình duyệt, chẳng hạn như Internet Explorer 6, hoàn toàn không hiển thị phần đệm được đặt trong dòng bảng, mặc dù cả Opera và Firefox sẽ làm như vậy. Tuy nhiên, phần đệm của bảng sử dụng kiểu này

|- ! align=left| Heading 1 !! style="font-family:courier;"| Heading 2 6

Mã này áp dụng đệm bảng cho tất cả các bên cùng một lúc, theo trình tự trên, phải, dưới, rồi trái; . Thuộc tính này chỉ ảnh hưởng đến phần đệm của bảng khi được viết trong dòng bảng
  • Giãn cách ô mô tả một khu vực giữa tất cả các đường viền của ô và chu vi của bảng. (Không gian bảng B trong hình). Nó được đặt độc lập với bất kỳ phần đệm bảng bên ngoài nào. Một giá trị có thể đặt khoảng cách cho tất cả các ô và khoảng cách ngang và dọc có thể được đặt riêng. Thuộc tính CSS này hoạt động với thuộc tính thu gọn đường viền và các đường viền cần được đặt thành tách biệt để sử dụng. Ví dụ, kiểu được sử dụng trong dòng bảng cho khoảng cách ô là

|- ! align=left| Heading 1 !! style="font-family:courier;"| Heading 2 7

Một phương pháp không gian tế bào khác tồn tại; . Có những lúc nó hữu ích và những lúc không. Tính đơn giản của nó làm cho nó phù hợp với các bảng lớn, nơi các kiểu CSS sẽ làm được nhiều việc. Nó chỉ áp dụng khoảng cách đồng đều nhưng điều đó thường là đủ. Nó không hữu ích lắm khi một bảng HTML được đưa vào một số loại mẫu; . Thuộc tính áp dụng khoảng cách đồng nhất trong dòng bảng với
  • Đệm ô mô tả không gian xung quanh văn bản trong một ô và ngăn cách nó với đường viền ô. (Không gian bảng C trong hình). Nó có một mô tả mã giống hệt với phần đệm của bảng ngoại trừ việc nó được viết trong dòng ô

|- ! align=left| Heading 1 !! style="font-family:courier;"| Heading 2 8

Nó không thể được viết theo một kiểu trong một hàng, vì vậy khi có nhiều phần đệm tùy chỉnh được thực hiện, bất kỳ số lượng câu lệnh kiểu nào cho các ô đều trở nên cần thiết. Có một thuộc tính HTML có thể áp dụng phần đệm đồng nhất cho tất cả các ô cùng một lúc và thuộc tính này được viết trong dòng bảng. Nó có dạng điển hình
  • Chú thích bảng là một dòng văn bản được đặt mặc định phía trên bảng và được căn giữa. Văn bản này rõ ràng nằm bên trong lề trên, vì vậy cần được xem xét trong cách bố trí bảng. Có một thuộc tính để đặt chú thích vào bất kỳ cạnh nào của bảng, nhưng không phải tất cả các trình duyệt đều có thể xử lý nó. Trong Wiki, nó có thành phần bảng riêng, |- ! align=left| Heading 1 !! style="font-family:courier;"| Heading 2 9 và dòng được viết ngay sau dòng bảng. Trong HTML, nó được tạo bằng cách thêm văn bản vào giữa

Các đường viền được sử dụng để làm nổi bật bảng so với các phần khác của trang và thường được sử dụng để trang trí

Đường viền có thể được đặt cho toàn bộ bảng cùng một lúc hoặc cho bất kỳ phần riêng lẻ nào của bảng. Tất cả độ dày, kiểu dáng và màu sắc của các đường viền này đều có thể được chỉ định và thậm chí còn có các quy tắc cho bốn cạnh riêng lẻ

Phần này mô tả các tùy chọn khác nhau có sẵn để tạo đường viền và cố gắng giới thiệu một số định dạng ít được biết đến hơn. Tham khảo Kiểu viền hộp thả xuống để biết tóm tắt về các kiểu viền

Phong Cách Biên GiớiRắn. {| class="wikitable" |+ Caption |-  ! Heading 1!! Heading 2 |- | A || B |- | C || D |} 4Chấm. {| class="wikitable" |+ Caption |-  ! Heading 1!! Heading 2 |- | A || B |- | C || D |} 5Rãnh. {| class="wikitable" |+ Caption |-  ! Heading 1!! Heading 2 |- | A || B |- | C || D |} 6Sườn núi. {| class="wikitable" |+ Caption |-  ! Heading 1!! Heading 2 |- | A || B |- | C || D |} 7Dashed. {| class="wikitable" |+ Caption |-  ! Heading 1!! Heading 2 |- | A || B |- | C || D |} 8Inset. {| class="wikitable" |+ Caption |-  ! Heading 1!! Heading 2 |- | A || B |- | C || D |} 9Đôi. Caption Heading 1 Heading 2 A B C D 0Đầu ra. Caption Heading 1 Heading 2 A B C D 1Chỉ hàng đầu. Caption Heading 1 Heading 2 A B C D 2Chỉ đúng. Caption Heading 1 Heading 2 A B C D 3Chỉ đáy. Caption Heading 1 Heading 2 A B C D 4Chỉ còn lại. Caption Heading 1 Heading 2 A B C D 5

ghi chú

  • Kiểu đường viền có thể được đặt ở cấp bảng hoặc ô và sẽ chỉ ảnh hưởng đến phần tử đó
  • Các mẫu đường viền trên được tạo với các kiểu được cung cấp ở cấp độ ô
  • Thuộc tính đường viền chỉ có thể được đặt ở cấp bảng và đặt đường viền ở mọi nơi
  • Thuộc tính đường viền , được đặt trong dòng bảng, chỉ là border=1px
  • Các kiểu đường viền một phần có thể cần xóa các đường viền khác để có hiệu ứng nhất định
  • Để xóa đường viền đã tạo kiểu, hãy nhập style="border. none" ở cùng cấp độ
  • Để xóa đường viền do thuộc tính đặt, hãy nhập đường viền=0 vào dòng bảng
  • Đường viền đã xóa có thể được khôi phục theo kiểu sau khi xóa
  • Kiểu đường viền ô chồng lên đường viền của bộ thuộc tính
  • Đối với chu vi của bảng, hãy sử dụng một trong các kiểu mẫu nhưng trong dòng bảng. Chu vi này sử dụng
phong cách = "đường viền. 2px rắn mờ"
  • Đường viền cho các hàng riêng biệt không được hỗ trợ và cần phải áp dụng đường viền ô
  • Ví dụ bên dưới có nhiều đường viền khác nhau. Ban đầu, không có đường viền bao quanh trên bảng cơ bản này. Một đường viền bên ngoài được đặt cho chu vi của bảng và các đường viền khác nhau được đặt cho phần dưới cùng của các ô riêng lẻ. Ngoài ra, màu nền của toàn bộ bảng đã được thay đổi thành màu vàng nhạt, sau đó màu tiêu đề thay đổi thành màu nâu. Màu văn bản của các tiêu đề đã được đặt thành màu trắng để tạo độ tương phản tốt hơn so với nền mới. Theo dõi chi tiết trong ví dụ bên dưới


Những gì bạn gõ

Caption Heading 1 Heading 2 A B C D 6


Những gì bạn nhận được

Tiêu đề hàng đầu Tiêu đề 1 Tiêu đề 2ABCD
  • Giãn cách ô đề cập đến không gian bao quanh mỗi ô trong bảng. Nó còn được gọi là khoảng cách biên giới
  • Nó có thể được đặt thành 0, nhưng nó thường được đặt thành một số giá trị thực tế để phân tách các ô và để cải thiện bố cục
  • Đôi khi các đường viền có thể được tạo chồng lên nhau và đây được gọi là đường viền bị thu gọn
  • Đôi khi khoảng cách ngang và dọc có thể được thực hiện khác nhau
  • Có hai phương pháp được sử dụng để tạo khoảng cách giữa các đường viền;
  • Khoảng cách chỉ có thể được viết vào dòng bảng
  • Trộn các phương thức kiểu và thuộc tính có thể gây nhầm lẫn cho đường viền và khoảng cách
  • Các bảng lớn được sử dụng tốt nhất với các thuộc tính HTML vì chúng làm giảm công việc

Phương thức thuộc tính HTML

  • Phương pháp tạo không gian ô này tạo ra giao diện đẹp nhất cho các đường viền được tạo bằng thuộc tính đường viền
  • Trong phương pháp này, việc áp dụng một giá trị cho không gian ô sẽ phân tách các đường viền một cách thích hợp. Đặt giá trị bằng 0 cho các đường viền bên trong mỏng này sẽ cho kết quả khá giống với các đường viền bị thu gọn được thấy trong các kiểu CSS và có giao diện gọn gàng mà không tốn nhiều công sức. Nếu thuộc tính khoảng cách ô bị bỏ qua hoàn toàn thì một lượng nhỏ khoảng cách vẫn được thêm vào
  • Các đường viền được tạo bằng thuộc tính đường viền là phức hợp. Tức là chúng luôn được làm từ hai màu khác nhau. Trong HTML, hai màu có thể được chỉ định, nhưng trong wikitext thì không thể. Trạng thái mặc định đặt màu sáng hơn cho viền dưới và bên phải và màu tối hơn cho bên trái và trên cùng
  • Các đường viền được tạo bằng các thuộc tính áp dụng cho toàn bộ bảng, bao gồm cả chu vi của bảng. Khi giá trị thay đổi, chu vi bên ngoài thay đổi nhưng đường viền bên trong giữ nguyên giá trị danh nghĩa
  • Khi cần các đường viền phức tạp hơn, các kiểu đường viền phải được sử dụng và để tạo khoảng cách cho chúng, các thuộc tính khoảng cách đường viền tương ứng được ưu tiên

Đây là những ví dụ về thuộc tính không gian ô

Caption Heading 1 Heading 2 A B C D 7

Mã có Border=1 và Cellspaces=15pxCó khoảng cách đồng nhất toàn diện. Đường viền được tạo bởi hai màuBorder=1 và Cellspaces=0Khoảng cách đã được loại bỏ. Các biên giới nằm cạnh nhau

Border=1 và Cellspaces bị bỏ quaGiãn cách mặc định đã được thêm vào. Các ô đã được đặt cách nhau. Đường viền dày 'được tạo kiểu' với Cellspacing=0Đường viền dày hiển thị hiệu ứng. Các biên giới nằm cạnh nhau

  • Thuộc tính không gian ô rất dễ sử dụng
  • Sử dụng không gian ô cho các bảng lớn để giảm công việc
  • Nếu thuộc tính khoảng cách ô bị bỏ qua, khoảng cách mặc định nhỏ sẽ được áp dụng
  • Phương pháp gần như thu gọn các đường viền thuộc tính với các ô không gian = 0. Đối với biên giới thực sự bị sụp đổ, tôi. e. , các đường viền chồng lên nhau, hãy sử dụng các kiểu CSS. Xem bên dưới
  • Các đường viền bên trong mỏng được tạo bằng border=1, tuy nhiên trông hợp lý với các ô không gian = 0, đặc biệt khi phương pháp CSS thay thế liên quan đến nhiều công việc

Khoảng cách đường viền CSS

Đường viền được thu gọn và tách biệt bằng CSS

Các ghi chú sau đây cho thấy ý định và hình thức của cả đường viền được thu gọn và đường viền riêng biệt

  • Giãn cách đường viền CSS được thiết kế để sử dụng với đường viền được tạo bằng kiểu CSS, không phải thuộc tính
  • Các đường viền được thu gọn nhằm mục đích chồng lên nhau và được thực hiện bằng cách đặt thu gọn cho thuộc tính thu gọn đường viền, bất kể khoảng cách đường viền
  • Các đường viền được phân tách không trùng lặp và được tạo bằng cách đặt riêng cho thuộc tính thu gọn đường viền và bằng cách đặt một lượng khoảng cách đường viền chính xác
  • Các đường viền cạnh nhau, được tạo bằng cách sử dụng các đường viền riêng biệt với khoảng cách được đặt thành 0
  • Đệm mức bảng chỉ có thể được sử dụng khi các đường viền được phân tách. Khi chúng được ngụ ý là được phân tách theo mặc định, (khi số lượng khoảng cách ô không được cung cấp) hoặc khi các đường viền bị thu gọn, kết quả sẽ là giả
  • Tuy nhiên, các định dạng sau đây đáng tin cậy

Đường viền bị sụp đổ

Caption Heading 1 Heading 2 A B C D 8

biên giới riêng biệt

Caption Heading 1 Heading 2 A B C D 9

Biên giới thu gọn trong chi tiết

Đường viền bị thu gọn có thể sử dụng một trong hai hình thức mã hóa này

attribute1=value1 attribute2=value2 attributeN=valueN0

hoặc;

attribute1=value1 attribute2=value2 attributeN=valueN1

Cả hai định dạng đều cho kết quả như sau

Đã thu gọn bất kể khoảng cách Khi các đường viền được thu gọn, chúng sẽ luôn chồng lên nhau. Điều này xảy ra bất kể khoảng cách đường viền nào được đặt


Ví dụ tương tự sử dụng viền mỏng trông như thế này

Đã thu gọn bất kể khoảng cách Khi các đường viền được thu gọn, chúng sẽ luôn chồng lên nhau. Điều này xảy ra bất kể khoảng cách đường viền nào được đặt

Biên giới riêng biệt trong chi tiết

Các đường viền được phân tách có thể có khoảng cách đồng nhất hoặc không đồng nhất

attribute1=value1 attribute2=value2 attributeN=valueN2
hoặc là
attribute1=value1 attribute2=value2 attributeN=valueN3


Ở dạng mã hóa đầu tiên, có khoảng cách đường viền thống nhất được đưa ra bởi một hình. Ở dạng thứ hai, hai hình tạo ra khoảng cách ngang và dọc tương ứng. Kết quả không thống nhất như sau

Được phân tách bằng Khoảng cách Chính xác;Các đường viền được phân tách không bao giờ trùng lặp và khác biệt. Khoảng cách đường viền có thể được đặt cho cả chiều ngang và chiều dọc


Ví dụ tương tự sử dụng viền mỏng trông như thế này

Được phân tách bằng khoảng cách chính xác Các đường viền được phân tách không bao giờ trùng lặp và khác biệt. Khoảng cách đường viền có thể được đặt cho cả chiều ngang và chiều dọc

Được phân tách bằng Border-spacing Zero

Trạng thái đường viền được phân tách có thể đặt các đường viền cạnh nhau bằng cách đặt khoảng cách thành 0. Để hoàn thành các trường hợp này cho đường viền dày và mỏng được hiển thị

Được phân tách bằng Border-spacing Các đường viền được phân tách bằng không không bao giờ trùng lặp và khác biệt. Khoảng cách đã biến mất


Ví dụ tương tự sử dụng viền mỏng trông như thế này

Được phân tách bằng Khoảng cách đường viền Độ dày ZeroDouble được ghi chú cho các đường viền bên trong. Sử dụng tốt nhất Đã thu gọn cho những thứ này

Khoảng cách với thuộc tính HTML

Đường viền được tạo bằng thuộc tính đường viền nên sử dụng thuộc tính không gian ô để thu gọn hoặc tạo khoảng cách cho đường viền của nó. Tương tự, khoảng cách CSS nên được sử dụng với các đường viền được tạo bằng CSS. Nhầm lẫn có thể phát sinh khi cố gắng tích hợp hai phương pháp này

Sự cố đôi khi xảy ra với thuộc tính không gian ô. Ví dụ: khi một bảng được hiển thị dưới dạng tham số của mẫu, mẫu có khả năng bị lỗi. Để tránh điều đó, bảng phải được tạo bằng HTML, thuộc tính không gian ô phải được xóa và thay vào đó nên sử dụng các kiểu CSS. Ngoài ra, wikitext nên được đổi thành HTML. Vào những thời điểm khác, dạng thuộc tính có thể hữu ích vì nó mang lại hiệu quả tốt cho công việc viết mã nhỏ.

  • Đệm ô đề cập đến không gian bao quanh văn bản trong một ô. Nó cũng có thể được áp dụng cho một cái bàn, để tạo khoảng trống ngay bên trong chu vi của nó
  • Đệm được duy trì ngay cả khi chiều rộng ô thay đổi
  • Các từ đơn lẻ của văn bản thường được xử lý bằng cách căn chỉnh thay vì đệm
  • Tất cả bốn mặt của một ô có thể được đệm khác nhau
  • Có thể áp dụng đệm bảng trong một số trình duyệt với điều kiện là đường viền không bị thu gọn
  • Có hai phương pháp để đệm;
  • Các thuộc tính được viết trong dòng bảng và các kiểu CSS được viết trong ô hoặc dòng bảng, tùy thuộc vào mục đích định dạng
  • Kiểu ô và thuộc tính bảng đệm ô có thể được sử dụng cùng nhau trong cùng một bảng mà không gây nhầm lẫn
  • Đệm ô đồng nhất cho các ô sử dụng thuộc tính HTML cellpadding trong dòng bảng
  • Phần đệm không đồng nhất cho các ô sử dụng các kiểu trong các dòng ô
  • Bất kỳ loại đệm bảng nào cũng cần có kiểu trong dòng bảng, nhưng chỉ có thể được sử dụng dễ dàng khi các đường viền được tách ra. Một số trình duyệt, chẳng hạn như Internet Explorer 6, hoàn toàn không hiển thị phần đệm được đặt trong dòng bảng, mặc dù cả Opera và Firefox sẽ làm như vậy

Đây là những ví dụ về thuộc tính cellpadding

{| class="wikitable" align=center width=50% style="background:lightyellow;color:maroon;" |+ style="font-weight:bold;"|Caption Text |- ! style="background:brown;color:white;"| Heading 1 ! style="background:brown;color:white;"| Heading 2 |- | Cell A1 Text||Cell A2 Text |- style="background:lightgray;" | style="border:3px solid darkred;"|Cell B1 Text | Cell B2 Text |} 0

Đã bỏ qua phần đệm ô Đây là một ví dụ không có phần đệm ô. Văn bản được đặt cứng so với đường viền ô

Đồng phục. Cellpadding=15pxĐây là một ví dụ về đệm toàn diện, sử dụng thuộc tính HTML. Văn bản đã được đặt cách nhau từ đường viền của mỗi ô bằng một mục nhập

  • Thuộc tính cellpadding rất dễ sử dụng
  • Thuộc tính chỉ áp dụng phần đệm thống nhất cho các ô

Đệm ô CSS

Đệm ô và đệm bảng bằng CSS

Các ghi chú sau đây cho thấy mã hóa cho hai phương pháp

đệm tế bào

{| class="wikitable" align=center width=50% style="background:lightyellow;color:maroon;" |+ style="font-weight:bold;"|Caption Text |- ! style="background:brown;color:white;"| Heading 1 ! style="background:brown;color:white;"| Heading 2 |- | Cell A1 Text||Cell A2 Text |- style="background:lightgray;" | style="border:3px solid darkred;"|Cell B1 Text | Cell B2 Text |} 1

Padding bảng, (một số trình duyệt)

{| class="wikitable" align=center width=50% style="background:lightyellow;color:maroon;" |+ style="font-weight:bold;"|Caption Text |- ! style="background:brown;color:white;"| Heading 1 ! style="background:brown;color:white;"| Heading 2 |- | Cell A1 Text||Cell A2 Text |- style="background:lightgray;" | style="border:3px solid darkred;"|Cell B1 Text | Cell B2 Text |} 2

Đệm ô và đối với vấn đề đó, đệm bảng cũng vậy, có thể được chỉ định theo một trong ba cách

  • Khi một giá trị duy nhất được trích dẫn, nó đề cập đến phần đệm thống nhất;
  • Khi hai giá trị được trích dẫn, giá trị đầu tiên đặt bên trái và bên phải và giá trị thứ hai đặt trên cùng và dưới cùng
  • Khi tất cả bốn giá trị được trích dẫn, chúng sẽ áp dụng theo thứ tự trên, phải, dưới và trái. Biểu thức kiểu có thể là một trong ba

phong cách = "phần đệm. 5px;"

hoặc;
phong cách = "phần đệm. 5px 10px;"
hoặc;

phong cách = "phần đệm. 5px 10px 15px 8px;"

Các định dạng này có hành vi tương tự như phiên bản thuộc tính ngoài khả năng đặt phần đệm không đồng nhất

Khi một thuộc tính được đặt cho ô đệm, một kiểu trong ô hoặc trong dòng của bảng sẽ được ưu tiên. Theo cách này, phần đệm chung có thể được đặt theo một thuộc tính và các biến thể từ nó theo kiểu ô

Phần đệm bảng sử dụng kiểu CSS giống như phần đệm ô ngoại trừ việc nó được đặt trong dòng bảng. Sự khác biệt chính là các đường viền phải được tách ra để sử dụng. Một số trình duyệt, chẳng hạn như Internet Explorer 6, hoàn toàn không hiển thị phần đệm được đặt trong dòng bảng, mặc dù cả Opera và Firefox sẽ làm như vậy. Kiểu sau đặt phần đệm bảng

style="thu gọn đường viền. ly thân; . 7px;phần đệm. 20px;"


Bảng không có phần đệm bảng được hiển thị trong ví dụ đầu tiên và có phần đệm bảng trong ví dụ thứ hai. Lưu ý rằng phần đệm của bảng tồn tại ngoài bất kỳ khoảng cách ô nào gần chu vi

Không có đệm bảngKhông có đệm bảng. Không có bảng đệm

Với đệm bảngVới đệm bảng. Với bảng đệm

Có thể tô màu nền cho cả bảng hoặc cho từng ô riêng lẻ. Vì vậy, cũng để tô màu văn bản. Khi không gian ô được sử dụng, thuộc tính nền của bảng sẽ đặt màu giữa các đường viền ô và nền ô, các màu bên trong. Một lựa chọn tên màu được cung cấp trong hộp thả xuống. Nếu cần thêm dữ liệu màu trong quá trình thiết kế, hãy gọi bất kỳ hoặc tất cả các mẫu hộp thả xuống Lightcolors, Mediumcolors, Darkcolors hoặc Greycolors trực tiếp vào sandbox

ColorsLight Colors for BackgroundsIvoryLinenBeigePapayawhipLemonchiffonFloralwhiteOldlaceLightyellowAzureMistyroseLavenderblushMintcreamGhostwhiteWhitesmokeLightgreyDarkgrayGrayDimgrayDark Colors for TextBlackDarkblueMidnightblueDarkgreenDarkolivegreenRoyalblueNavyDarkslateblueBlueDarkredMaroonBrownFirebrickRedWhite

Quy tắc kiểu để đặt cả màu nền và màu văn bản thường là

attribute1=value1 attribute2=value2 attributeN=valueN4

trong đó nền là màu nền của phần tử và màu là màu của văn bản

Những màu này có thể được đặt trong bất kỳ thành phần bảng, hàng hoặc ô nào và tuân theo các ưu tiên kiểu CSS thông thường đã thảo luận trước đây

Có ít nhất ba cách để chỉ định một màu

  • Ví dụ: sử dụng tên màu;
  • Sử dụng giá trị RGB cho màu;
  • Sử dụng ký hiệu HEX cho màu sắc;

Để nhấn mạnh hơn nữa điểm này, ba biểu thức kiểu sau cho văn bản màu đen trên nền giống màu be là tương đương

attribute1=value1 attribute2=value2 attributeN=valueN6
hoặc;

attribute1=value1 attribute2=value2 attributeN=valueN7
hoặc;

attribute1=value1 attribute2=value2 attributeN=valueN8

Lưu ý rằng việc sử dụng ký hiệu HEX có dấu chấm phẩy ở cuối. Vì dấu chấm phẩy cũng được sử dụng làm dấu phân cách cho các quy tắc kiểu nên hoàn toàn có khả năng hai dấu chấm phẩy sẽ xuất hiện cùng nhau trong mã. Không ai trong số này nên được bỏ qua

Các bảng có cùng số cột trong mỗi hàng và để tranh luận, cùng số hàng trong mỗi cột được gọi là bảng thống nhất. Tuy nhiên, các bảng không thống nhất có thể được tạo bằng cách hợp nhất các ô, được gọi trong wikitext và HTML là kéo dài

Những gì bạn gõ [ chỉnh sửa. sửa nguồn]

{| class="wikitable" align=center width=50% style="background:lightyellow;color:maroon;" |+ style="font-weight:bold;"|Caption Text |- ! style="background:brown;color:white;"| Heading 1 ! style="background:brown;color:white;"| Heading 2 |- | Cell A1 Text||Cell A2 Text |- style="background:lightgray;" | style="border:3px solid darkred;"|Cell B1 Text | Cell B2 Text |} 3

}

Ghi chú Colspan[sửa | sửa mã nguồn]. sửa nguồn]

  • Các kiểu được phân tách khỏi dữ liệu bằng ký hiệu ống
  • Đường viền thuộc tính HTML và colspan sử dụng dấu phân cách bằng
  • Colspan có thể được coi là vươn tới bên phải
  • Các ô kéo dài nên được bỏ qua trong mã
  • Các giá trị không nhất quán không mở rộng bảng

Tương tự, chúng ta có thể làm điều tương tự với các hàng

Những gì bạn gõ [ chỉnh sửa. sửa nguồn]

{| class="wikitable" align=center width=50% style="background:lightyellow;color:maroon;" |+ style="font-weight:bold;"|Caption Text |- ! style="background:brown;color:white;"| Heading 1 ! style="background:brown;color:white;"| Heading 2 |- | Cell A1 Text||Cell A2 Text |- style="background:lightgray;" | style="border:3px solid darkred;"|Cell B1 Text | Cell B2 Text |} 4

Ghi chú Rowspan[sửa | sửa mã nguồn]. sửa nguồn]

  • Các kiểu được phân tách khỏi dữ liệu bằng ký hiệu ống
  • Thuộc tính HTML đường viền và hàng kéo dài sử dụng dấu phân cách bằng
  • Rowspan có thể được coi là vươn xuống dưới
  • Các ô kéo dài nên được bỏ qua trong mã
  • Các giá trị không nhất quán không mở rộng bảng

Hai thuộc tính rowspan và colspan có thể được kết hợp để đồng thời span theo chiều dọc và chiều ngang

Những gì bạn gõ [ chỉnh sửa. sửa nguồn]

{| class="wikitable" align=center width=50% style="background:lightyellow;color:maroon;" |+ style="font-weight:bold;"|Caption Text |- ! style="background:brown;color:white;"| Heading 1 ! style="background:brown;color:white;"| Heading 2 |- | Cell A1 Text||Cell A2 Text |- style="background:lightgray;" | style="border:3px solid darkred;"|Cell B1 Text | Cell B2 Text |} 5

Ghi chú nhịp hỗn hợp [ chỉnh sửa. sửa nguồn]

  • Các thuộc tính Rowspan và colspan có thể được áp dụng cho cùng một ô
  • Khoảng cách giữa các ô chỉ có thể được tạo cho các kích thước nối có thể so sánh được
  • Các ô kéo dài nên được bỏ qua trong mã
  • Việc xóa các ô được kéo dài không được làm trống một hàng. Ví dụ: một nỗ lực để tiếp tục tạo thành một hàng giữa H và L sẽ yêu cầu ô L là ô cuối cùng còn lại trong hàng, bị xóa và phép nối sẽ không thành công

Có ba hành vi riêng biệt cho các bảng khi nội dung được thêm vào các ô;

  • Trường hợp đầu tiên là phổ biến nhất; . Đó là, văn bản phụ thuộc vào phần mềm để ngắt dòng
  • Loại hành vi thứ hai dành cho văn bản được định dạng trước trong các thẻ định dạng trước hoặc bổ sung cấu trúc dạng hộp, chẳng hạn như các bảng hoặc hình ảnh khác. Bộ thứ hai này được đặc trưng là có chiều rộng mặc định hoặc chiều rộng được chỉ định của riêng chúng
  • Loại nội dung bảng thứ ba là một chuỗi ký tự rất dài không có khoảng trắng, thuộc loại đôi khi được thấy trong danh sách chương trình

Ba trường hợp này được giải thích chi tiết hơn dưới đây

Xét trường hợp văn bản chưa được định dạng. Khi cài đặt độ rộng của bảng và các ô của nó không được đặt trong mã, văn bản được thêm vào các ô sẽ khiến các ô và bảng mở rộng ra toàn bộ chiều rộng của trang trước khi bất kỳ dòng văn bản nào diễn ra. Trong trường hợp không có cài đặt chiều rộng, bảng có chiều rộng đầy đủ có thể được tạo

Khi chiều rộng của bảng và chiều rộng của các ô trong bảng được chỉ định đầy đủ, văn bản của ô sẽ bắt đầu ngắt dòng khi văn bản của các ô riêng lẻ chạm đến đường viền ô của chúng. Sau đó, tại một số giai đoạn với văn bản tăng dần, ô sẽ mở rộng xuống dưới, trong khi vẫn duy trì cài đặt chiều rộng của nó. Hành vi này rõ ràng ngay cả khi chiều cao của các ô đã được chỉ định

Xem xét trường hợp nội dung ô có chiều rộng mặc định hoặc chiều rộng đặt trước của riêng chúng. Giả sử rằng nội dung là một hình ảnh. Cho dù độ rộng của các ô có được đặt trong mã hay không, hình ảnh sẽ mở rộng ô để chứa chính nó. Nếu chiều rộng của bảng được đặt thì các ô khác thậm chí có thể bị thu hẹp hoặc mở rộng về chiều cao để duy trì chiều rộng và nội dung của bảng dự kiến. Khi chiều rộng của bảng không thể được duy trì theo cách này, bảng sẽ được mở rộng, có thể vượt ra ngoài lề phải của trang. Hành vi này thường thấy đối với văn bản trong các thẻ văn bản được định dạng trước. Để tránh những vấn đề này, chỉ cần giới hạn độ rộng của nội dung, trong phạm vi mã hóa của chính nội dung đó

Chuỗi văn bản dài không có dấu cách[sửa. sửa nguồn]

Các ô của bảng thường chứa danh sách mã dưới dạng văn bản để người dùng có thể xem cách viết mã. Một số dòng mã này khá dài và thông thường sẽ được bao bọc trong chiều rộng được đặt cho bảng. Tuy nhiên, vì văn bản không có dấu cách được coi là một từ nên bảng không thể ngắt ở giữa để ngắt dòng. Trong trường hợp này, bảng được mở rộng, bất kể cài đặt chiều rộng. Việc thiếu bọc này có thể là một vấn đề ở những nơi khác, ngay cả khi đã lên kế hoạch xếp hàng dài. Vấn đề có thể tránh được bằng cách đặt đủ số lượng khoảng trắng trong các chuỗi văn bản dài. Ví dụ: biểu thức kiểu CSS cho phép khoảng trắng ở nhiều điểm, miễn là chúng không được đặt ngay trước dấu chấm phẩy hoặc dấu hai chấm

  • Chiều rộng sử dụng đơn vị tuyệt đối như pixel hoặc đơn vị tương đối như tỷ lệ phần trăm
  • Các đơn vị tương đối rất hữu ích vì không cần biết chiều rộng của trang
  • Chiều rộng tương đối liên quan đến tỷ lệ phần trăm chiều rộng của trang trong trường hợp bảng hoặc bảng nếu cài đặt chiều rộng dành cho một ô
  • Chiều cao không bao giờ thực sự cố định, mặc dù đôi khi nó giúp tạo ra một số chiều cao tối thiểu cho tác phẩm

Một bộ bảng với chiều rộng tương đối có thể được nhìn thấy dưới đây. Bảng được đặt để chiếm một nửa chiều rộng của trang, (chiều rộng=50%) và hai cột ngoài cùng bên trái mỗi cột chiếm 25 phần trăm chiều rộng đó. Lưu ý rằng chiều rộng của ô sẽ bằng 25 phần trăm của bất kỳ chiều rộng nào được cung cấp cho bảng và không cần biết chiều rộng của trang cũng như chiều rộng cuối cùng của bảng. Hình ảnh sử dụng kích thước riêng của nó để chiếm chiều rộng còn lại và cũng được căn giữa bằng mã riêng. Lưu ý rằng mặc dù cả hai hàng đã được chỉ định có cùng chiều cao, nhưng hình ảnh đã làm cho hàng trên cùng sâu hơn. Lợi thế cũng được tận dụng của bố cục này để hiển thị sự sắp xếp văn bản theo chiều ngang và chiều dọc cơ bản

Những gì bạn gõ [ chỉnh sửa. sửa nguồn]

{| class="wikitable" align=center width=50% style="background:lightyellow;color:maroon;" |+ style="font-weight:bold;"|Caption Text |- ! style="background:brown;color:white;"| Heading 1 ! style="background:brown;color:white;"| Heading 2 |- | Cell A1 Text||Cell A2 Text |- style="background:lightgray;" | style="border:3px solid darkred;"|Cell B1 Text | Cell B2 Text |} 6

Ghi chú Ví dụ[sửa | sửa mã nguồn]. sửa nguồn]

  • Các cột được đặt thành 25%, 25% và 50% (ngụ ý) của chiều rộng bảng tương ứng
  • Bảng được đặt thành 50% chiều rộng trang có sẵn
  • Cả hai hàng ban đầu được đặt thành chiều cao 60 pixel
  • Hình ảnh buộc hàng trên cùng có chiều cao 90 pixel nhưng có đủ không gian theo chiều ngang
  • Kích thước của hình ảnh được đặt trong mã hình ảnh
  • Hình ảnh cũng sử dụng mã riêng của nó để tự định vị theo chiều ngang;
  • Các ô văn bản giới thiệu các cách sắp xếp văn bản khác nhau

Những gì bạn nhận được[sửa | sửa mã nguồn]. sửa nguồn]

Các bảng có thể được căn chỉnh theo chiều ngang trên trang bằng thuộc tính HTML 'align' , với kiểu CSS 'float' và với kiểu CSS 'margin'. Trong mỗi trường hợp, các quy tắc kiểu này được đặt trong dòng bảng. Việc căn chỉnh theo chiều dọc thô sơ của các bảng được thực hiện bằng cách sử dụng ngắt dòng văn bản, trong khi các điều chỉnh tinh vi có thể được thực hiện bằng các kiểu lề CSS

  • Phương thức thuộc tính HTML sử dụng thuộc tính align trong dòng bảng để định vị bảng ở bên trái, giữa hoặc bên phải của không gian có sẵn và các ví dụ về việc sử dụng nó có thể được nhìn thấy trong mã bảng trên khắp trang này. Điểm duy nhất cần lưu ý là đối với việc căn giữa các bảng, các kiểu CSS lề trong cùng một dòng bảng sẽ được ưu tiên hơn so với căn chỉnh. Lề trên và dưới sẽ không gây ra vấn đề nhưng việc sử dụng lề trái hoặc phải sẽ. Văn bản có thể nổi xung quanh một bảng như vậy ngoại trừ trường hợp ở giữa
  • Kiểu CSS 'float' không thể đặt bảng ở giữa không gian có sẵn nhưng bị giới hạn ở bên trái và bên phải. Nó có lợi thế là văn bản có thể nổi xung quanh bảng
  • 'Lề' kiểu CSS là tốt nhất và theo cài đặt của nó, có thể đặt bảng ở bất kỳ đâu trong căn chỉnh ngang. Khi thuộc tính lề được đặt thành tự động, bảng được đặt ở giữa không gian chứa theo chiều ngang. Có thể thu được kết quả tương tự khi sử dụng hợp lý các phép đo tương đối (%). Mức độ mà văn bản nổi xung quanh một bảng được định vị với lề phụ thuộc vào lượng không gian còn lại

Xem các ví dụ trong hộp thả bên dưới

Căn chỉnh bảng Ví dụ về căn chỉnh bảng
Trong các ví dụ tiếp theo, bạn nên coi vị trí của các bảng trong chiều rộng của hộp thả xuống là đại diện cho cách mà chúng sẽ được nhìn thấy trên trang Wiki thông thường

Bảng đầu tiên này chỉ sử dụng các thuộc tính để đặt chiều rộng và định vị bảng ở giữa trang

{| class="wikitable" align=center width=50% style="background:lightyellow;color:maroon;" |+ style="font-weight:bold;"|Caption Text |- ! style="background:brown;color:white;"| Heading 1 ! style="background:brown;color:white;"| Heading 2 |- | Cell A1 Text||Cell A2 Text |- style="background:lightgray;" | style="border:3px solid darkred;"|Cell B1 Text | Cell B2 Text |} 7Căn giữa và có kích thước với các thuộc tínhKhông hoạt động tốt với wikitable và không được dùng trong HTML 4

Bảng thứ hai căn giữa một bảng bằng cách sử dụng giá trị tự động của thuộc tính lề CSS. Khi kết hợp với thước đo tương đối cho chiều rộng của bảng, sẽ có sự điều chỉnh hợp lý cho các kích thước màn hình thay đổi. Bởi vì nó được căn giữa, mọi văn bản liền kề phải theo sau và không thể ngắt dòng. Bảng và các lề chiếm toàn bộ chiều rộng của vùng chứa của bảng và với phương pháp này, các lề trên và dưới trở thành 0

{| class="wikitable" align=center width=50% style="background:lightyellow;color:maroon;" |+ style="font-weight:bold;"|Caption Text |- ! style="background:brown;color:white;"| Heading 1 ! style="background:brown;color:white;"| Heading 2 |- | Cell A1 Text||Cell A2 Text |- style="background:lightgray;" | style="border:3px solid darkred;"|Cell B1 Text | Cell B2 Text |} 8Được căn giữa bằng cách sử dụng giá trị tự động của lề thuộc tính CSS. Văn bản bảng

Bảng thứ ba mô phỏng một bảng được căn giữa cho bất kỳ chiều rộng màn hình nào, nhưng giống như tất cả các bảng được căn giữa chỉ phù hợp với văn bản tiếp theo. Bảng và lề chiếm toàn bộ chiều rộng của vùng chứa của bảng

{| class="wikitable" align=center width=50% style="background:lightyellow;color:maroon;" |+ style="font-weight:bold;"|Caption Text |- ! style="background:brown;color:white;"| Heading 1 ! style="background:brown;color:white;"| Heading 2 |- | Cell A1 Text||Cell A2 Text |- style="background:lightgray;" | style="border:3px solid darkred;"|Cell B1 Text | Cell B2 Text |} 9Căn giữa bằng cách sử dụng chiều rộng tương đối và lề CSS StyleTable Text

Bảng thứ tư đặt bảng ở bên phải của trang và định kích thước cho nó bằng cách sử dụng các kiểu CSS 'chiều rộng' và 'phao'

|- style="background:lightgray;" | style="border:3px solid darkred;"|Cell B1 Text || align=left| Cell B2 Text 0Được thả nổi bên phải bằng văn bản bảng 'float'

Như trường hợp của hầu hết các kiểu bảng, có hai phương pháp chính;

  • Tất cả văn bản có thể được định vị bằng các thuộc tính. Xem bảng dưới đây để biết các ví dụ
  • Định vị dọc của hình ảnh và các hình hộp khác cần có thuộc tính kiểu dọc căn chỉnh, với định vị ngang sử dụng mã riêng của chúng

Tóm tắt căn chỉnh thuộc tính như sau

  • Căn chỉnh căn chỉnh theo chiều ngang của văn bản. Nó có các giá trị bên trái, giữa hoặc bên phải. Ví dụ: căn chỉnh=trung tâm để căn giữa văn bản (hoặc bảng)
  • Valign thiết lập căn lề dọc của văn bản. Nó có các giá trị trên cùng, giữa và dưới cùng. Không có cách sử dụng tương đương trong dòng bảng
  • Căn dọc văn bản sử dụng valign ở cấp độ ô hoặc thuộc tính CSS vertical-align
  • Căn dọc hình ảnh và bảng lồng nhau chỉ sử dụng thuộc tính CSS vertical-align ở cấp độ ô
  • Hình ảnh và bảng lồng nhau thiết lập sắp xếp theo chiều ngang của chúng trong mã hóa của riêng chúng
  • Không thể đặt căn chỉnh dọc ở cấp độ bảng

Các bảng sau đây hiển thị các kiểu để sử dụng cho một hiệu ứng nhất định và đặc biệt là việc sử dụng các thuộc tính HTML align và valign. Ngoài ra, căn chỉnh dọc của hình ảnh và bảng lồng nhau được hiển thị trong khối mã và bảng sau

Các tùy chọn căn chỉnh có sẵnIntended AlignmentAttribute
alignAttribute
valign Kiểu CSS
căn chỉnh văn bản Kiểu CSS
vertical-alignH-Vị trí của Bảng ở cấp độ bảngCóV-Vị trí của Bảng ở cấp độ bảngKhông có sẵn - vị trí của bảng trong trangH-Vị trí của tất cả văn bản ở cấp độ bảngCóV-Vị trí của tất cả văn bản ở cấp độ bảngKhông có sẵn - phải được thực hiện ở cấp độ ôH

Thuộc tính kết hợp căn chỉnh văn bản[sửa | sửa mã nguồn]. sửa nguồn]

Căn chỉnh văn bản trong ô bằng cách sử dụng các thuộc tính attribute1=value1 attribute2=value2 attributeN=valueN9 và cellpadding=10px cellspacing=8px align=center0_______11_______1cellpadding=10px cellspacing=8px align=center2cellpadding=10px cellspacing=8px align=center3cellpadding=10px cellspacing=8px align=center4_______11_______5Đây là cellpadding=10px cellspacing=8px align=center1 và cellpadding=10px cellspacing=8px align=center5. Đây là cellpadding=10px cellspacing=8px align=center2 và cellpadding=10px cellspacing=8px align=center5. Đây là cellpadding=10px cellspacing=8px align=center3 và cellpadding=10px cellspacing=8px align=center5. Đây là cellpadding=10px cellspacing=8px align=center4 và cellpadding=10px cellspacing=8px align=center5. văn bản là hợp lý. style = "property1:value1; property2:value2; .. propertyN:valueN;"4Đây là cellpadding=10px cellspacing=8px align=center1 và style = "property1:value1; property2:value2; .. propertyN:valueN;"4. Đây là cellpadding=10px cellspacing=8px align=center2 và style = "property1:value1; property2:value2; .. propertyN:valueN;"4. Đây là cellpadding=10px cellspacing=8px align=center3 và style = "property1:value1; property2:value2; .. propertyN:valueN;"4. Đây là cellpadding=10px cellspacing=8px align=center4 và style = "property1:value1; property2:value2; .. propertyN:valueN;"4. văn bản là hợp lý. style="background:lightyellow; color:royalblue;"3Đây là cellpadding=10px cellspacing=8px align=center1 và style="background:lightyellow; color:royalblue;"3. Đây là cellpadding=10px cellspacing=8px align=center2 và style="background:lightyellow; color:royalblue;"3. Đây là cellpadding=10px cellspacing=8px align=center3 và style="background:lightyellow; color:royalblue;"3. Đây là cellpadding=10px cellspacing=8px align=center4 và style="background:lightyellow; color:royalblue;"3. văn bản là hợp lý

Căn dọc hình ảnh và bảng lồng nhau[sửa | sửa mã nguồn]. sửa nguồn]

|- style="background:lightgray;" | style="border:3px solid darkred;"|Cell B1 Text || align=left| Cell B2 Text 1Căn chỉnh theo chiều dọc của các Đối tượng dạng hộp với các kiểu CSS, (Hình ảnh và Bảng lồng nhau)

|- style="background:lightgray;" | style="border:3px solid darkred;"|Cell B1 Text || align=left| Cell B2 Text 2

|- style="background:lightgray;" | style="border:3px solid darkred;"|Cell B1 Text || align=left| Cell B2 Text 3

|- style="background:lightgray;" | style="border:3px solid darkred;"|Cell B1 Text || align=left| Cell B2 Text 4

|- style="background:lightgray;" | style="border:3px solid darkred;"|Cell B1 Text || align=left| Cell B2 Text 2

Lưu ý rằng các bao gồm hình ảnh và bảng lồng nhau này sử dụng mã riêng của chúng để đặt các vị trí nằm ngang và các kiểu CSS trong các ô của bảng cho bất kỳ vị trí dọc nào khác với các vị trí mặc định. Lưu ý kỹ thuật

Các bảng có thể được tạo để khi hiển thị trên trang, nhấp vào liên kết sẽ sắp xếp bảng. Nhấp vào nó một lần nữa sẽ sắp xếp nó theo hướng ngược lại. Mỗi cột được cung cấp một liên kết sắp xếp, vì vậy việc sắp xếp có thể được thực hiện trên bất kỳ cột nào. Phương pháp này cho phép người dùng xem dữ liệu từ các quan điểm khác nhau

Các bảng cũng có thể ẩn nội dung của chúng. Những bảng này được gọi là có thể thu gọn. Các bảng có thể thu gọn giống như một hộp đơn giản ở trạng thái thu gọn; . Liên kết có một hành động chuyển đổi; . Các bảng như vậy giúp trang gọn gàng hơn và do đó tránh bị phân tâm khỏi các chủ đề chính. Chúng được sử dụng đặc biệt cho thông tin bổ sung

Ở dạng đơn giản nhất, việc thêm khai báo lớp class="sortable" vào dòng bảng của bất kỳ bảng nào sẽ tạo thành một bảng có thể sắp xếp, bất kể các lớp và kiểu khác được áp dụng. Đoạn mã sau minh họa phương thức và kết quả được hiển thị bên dưới

|- style="background:lightgray;" | style="border:3px solid darkred;"|Cell B1 Text || align=left| Cell B2 Text 6

Nhấp vào liên kết trong bảng kết quả này để xem cách sắp xếp hoạt động

MộtHaiBaBốnMAKEENDSMEET

Để xử lý rộng rãi hơn về chủ đề này, độc giả nên xem meta. Giúp đỡ. Sắp xếp

Mã cho bảng có thể thu gọn rất giống với mã cho bảng thông thường, có thêm phần khai báo lớp. (Một số trình duyệt Internet Explorer gặp liên kết bị lỗi)

Đây cũng là một ví dụ tốt về cách khai báo nhiều lớp. Mã shell cơ bản cho một bảng có thể thu gọn và kết quả có thể ở bên dưới

|- style="background:lightgray;" | style="border:3px solid darkred;"|Cell B1 Text || align=left| Cell B2 Text 7

Kết quả là

Bấm vào đây để biết nội dung Nội dung này chứa nội dung ẩn

Dù có bao gồm lớp wikitable hay không, tiêu đề màu tím là một tính năng mặc định. Tuy nhiên, các thuộc tính HTML và kiểu CSS có thể được áp dụng cho tiêu đề như với tất cả các phần khác

Khi thuộc tính chiều rộng được sử dụng, chiều rộng được mở rộng và chiều rộng ban đầu sẽ giống nhau và được cố định bởi nó. Trong điều kiện này, văn bản chưa định dạng sẽ bao quanh chiều rộng đã đặt. Văn bản được định dạng sẵn sẽ mở rộng hộp theo chiều dài của dòng dài nhất. Các cấu trúc hộp như bảng HTML và hình ảnh sẽ mở rộng phần thả xuống theo chiều rộng của hộp

Nếu mục đích là hiển thị văn bản chưa định dạng nhưng có chiều rộng hộp ban đầu hẹp hơn chiều rộng hộp mở, thì nội dung được hiển thị phải được đặt trong một ô bảng lồng nhau của chính nó và bảng đó được đặt thành cài đặt chiều rộng mở bắt buộc. Cũng lưu ý rằng căn chỉnh văn bản mặc định cho bảng có thể thu gọn này là căn giữa

Khi thuộc tính chiều rộng bị bỏ qua, chiều rộng ban đầu được đặt bằng chiều rộng của văn bản tiêu đề. Trong điều kiện này, văn bản chưa được định dạng sẽ mở rộng hộp theo chiều rộng có sẵn của trang và văn bản được định dạng sẵn sẽ mở rộng hộp theo chiều dài của dòng dài nhất. Các cấu trúc hộp như bảng HTML và hình ảnh như mọi khi sẽ mở rộng phần thả xuống theo chiều rộng của hộp

Có thể có một giải pháp thay thế để tạo bảng có thể thu gọn của riêng bạn bằng cách sử dụng mẫu Dropimage. Mẫu này có một bộ tùy chọn toàn diện, bao gồm các tùy chọn để thay đổi toàn bộ biểu thức kiểu và lớp. Nó dựa trên lớp Collapsible. Kết quả của việc sử dụng Dropimage có thể được nhìn thấy bằng cách xem lại tác dụng của hộp thả xuống trên trang này. Những độc giả cần thêm thông tin về các bảng có thể thu gọn và đặc biệt là thông tin về cách kết hợp các bảng có thể sắp xếp và có thể thu gọn, nên xem meta. Giúp đỡ. sụp đổ

Làm cách nào để chuyển đổi HTML sang đánh dấu wiki?

Nhấp vào nút "Chuyển đổi HTML sang mã đánh dấu wiki" (nếu nó không hoạt động, hãy sử dụng tùy chọn "Tìm nạp từ URL" hoặc một trình chuyển đổi HTML khác). .
Xem nguồn trang (trong menu chuột phải). .
Hoặc sao chép liên kết trong hộp "Tìm nạp từ URL". .
Ghi chú. Nói chung, đối với trang UBC, nội dung bạn muốn giữ nằm trong khoảng

Chủ đề