Đường viền bảng html không có css

NB1. 16 = 5 pixel viền + 10 pixel giãn cách + 1 pixel đổ bóng. Tương tự, khoảng cách 12 = 10 px + 2 bóng đổ

NB2. Trong trường hợp này, thật thuận tiện khi chỉ định sườn núi là 1,10,1, tổng bằng 12, nhưng 2,20,2 sẽ cho kết quả chính xác như vậy

Đầu bảng phức tạp, nhưng không có quy tắc nào trong phần thân

thead {
    border-top: solid thick;
    border-right: blank;    /* prevent colgroup border */
    border-left: blank      /* prevent cell border */
}
colgroup { border-right: solid thick }
thead td { border: solid }
tbody td { border: blank }  /* remove colgroup border */
}

Ví dụ này phức tạp vì không có cách nào để giải quyết phần của colgroup trong phần đầu. Có vẻ như chúng ta sẽ cần một toán tử giao điểm sắp xếp cho điều đó. Vấn đề đã được giải quyết trong trường hợp này bằng cách đặt đường viền trên toàn bộ nhóm và sau đó xóa lại trong tbody

Ví dụ 1 của Chris Wilson, trong ký hiệu của anh ấy

table { border: 2px outset grey / darkgray; padding: 1px }
td { border: thin inset grey /darkgray; margin: 1px }

trong ký hiệu của tôi

table { border: 5px ridge[2,2,1] }
td { border: 4px ridge /* implied: [1,2,1] */ }

Giả sử rằng `mỏng' có nghĩa là 1px [không quá khó xảy ra], đường viền của bảng sẽ là 2px bóng + 1px đệm + 1px lề + 1 px bóng = 5px. Lưu ý rằng tôi cũng cho rằng màu bóng được chọn tự động

Ví dụ 2 của Chris Wilson. Trong ký hiệu của mình

table { border: 2px outset grey / darkgray; padding: 1px }
tr {border: thin inset grey /darkgray; margin: 1px }

trong ký hiệu của tôi

table { border: 5px ridge[2,2,1] }
tr { border: 4px ridge }

Lưu ý rằng có nhiều cách khác để xác định cùng. Thay vì đường viền trên TR, người ta có thể đặt trên cùng và dưới cùng trên mỗi ô

Ví dụ 3 của Chris Wilson. Trong ký hiệu của mình

table {
    border-top: double;
    border-bottom: double;
    border-right: blank
}
thead, tbody, tfoot {
    border-top: solid;
    border-bottom: solid
}
colgroup {
    border-right: solid
}

trong ký hiệu của tôi

table {
    border-top: double;
    border-bottom: double;
    border-right: blank
}
thead, tbody, tfoot {
    border-top: solid;
    border-bottom: solid
}
colgroup {
    border-right: solid
}

Ví dụ 4 của Chris Wilson. Trong ký hiệu của mình

table {
    border-top: double;
    border-bottom: double;
    border-right: blank
}
thead, tbody, tfoot {
    border-top: solid;
    border-bottom: solid
}
colgroup {
    border-right: solid
}

trong ký hiệu của tôi

table {
    border-top: double;
    border-bottom: double;
    border-right: blank
}
thead, tbody, tfoot {
    border-top: solid;
    border-bottom: solid
}
colgroup {
    border-right: solid
}

Phần bóng tối dường như nhô ra ngoài, thay vì ở bên trong đường viền. Điều đó có nghĩa là nó có thể chồng lên thứ khác, nhưng có lẽ đó là một điều tốt. Làm thế nào về việc thêm độ trong suốt cho bóng tối?

table {
    border-top: double;
    border-bottom: double;
    border-right: blank
}
thead, tbody, tfoot {
    border-top: solid;
    border-bottom: solid
}
colgroup {
    border-right: solid
}

Ô G được coi là có ID `G'. Từ khóa `ghi đè' được sử dụng để đảm bảo kiểu đường viền của ô được tôn trọng. Nếu bóng đổ luôn 'mạnh' hơn dấu chấm, có thể bỏ qua từ khóa này

Sự khác biệt màu sắc giữa đường viền và ô là một vấn đề. Nó có thể được giải quyết theo nhiều cách. [1] trong HTML, bằng cách đặt nội dung ô bên trong một phần tử khác, chẳng hạn như P hoặc DIV và đặt nền trên đó hoặc [2] giới thiệu thuộc tính nền viền hoặc [3] chỉ định rằng nền bảng được sử dụng

Giải pháp 1 không hoạt động nếu các phần tử con có chiều cao không bằng nhau. Với giải pháp 2 và 3, kiểu chấm chấm cần tham số bổ sung đã được đề xuất trước đó, để đặt đường kính của chấm

Sử dụng giải pháp 2 [đặt màu vàng cho các phần tử con của ô]

table {
    border-top: double;
    border-bottom: double;
    border-right: blank
}
thead, tbody, tfoot {
    border-top: solid;
    border-bottom: solid
}
colgroup {
    border-right: solid
}

Sử dụng giải pháp 3 [nền bảng được sử dụng cho đường viền]

table {
    border-top: double;
    border-bottom: double;
    border-right: blank
}
thead, tbody, tfoot {
    border-top: solid;
    border-bottom: solid
}
colgroup {
    border-right: solid
}

Sử dụng mô hình của Dave

table {
    border-top: double;
    border-bottom: double;
    border-right: blank
}
thead, tbody, tfoot {
    border-top: solid;
    border-bottom: solid
}
colgroup {
    border-right: solid
}

Vấn đề ở đây là các đường viền ngắn màu đỏ. Có vẻ như cần phải giới thiệu các quy tắc ngắn dưới dạng các loại đường viền. Lưu ý rằng các điểm cuối của quy tắc không được căn chỉnh với văn bản, mặc dù điều đó phổ biến hơn trong các bảng khác

Ngoài ra, các đường màu trắng dường như nằm bên dưới các chấm màu xanh lá cây, nhưng đây có thể là quy tắc chung bất cứ khi nào một đường liền nét và một đường chấm chấm cắt nhau

Một nỗ lực sử dụng mô hình của Dave

table {
    border-top: double;
    border-bottom: double;
    border-right: blank
}
thead, tbody, tfoot {
    border-top: solid;
    border-bottom: solid
}
colgroup {
    border-right: solid
}

Một nỗ lực sử dụng mô hình của tôi

table {
    border-top: double;
    border-bottom: double;
    border-right: blank
}
thead, tbody, tfoot {
    border-top: solid;
    border-bottom: solid
}
colgroup {
    border-right: solid
}

Văn bản đường chéo và đường viền chéo không thể được thực hiện mà không giới thiệu một số thuộc tính mới. Lưu ý rằng các ô được cắt 30°, trong khi văn bản cũng được đặt theo chiều dọc

col {
    border-left: solid;
    border-right: solid
}

Có một số cách để nhìn vào bảng này. [1] thực ra là hai cái bàn thay vì một, [2] có khoảng trống giữa đầu và thân, [3] giữa đầu và thân là một đường đôi

Sử dụng 3 [và giả sử nền đường viền được lấy từ nền bảng]

col {
    border-left: solid;
    border-right: solid
}

Quy tắc ngang ngắn giữa các ô

col {
    border-left: solid;
    border-right: solid
}

Mặc định cho `ngắn' có thể là phần đệm của ô

Viền đơn đen ở thân, viền trắng [hoặc trong suốt] ở đầu. [Thật ra trong bản gốc, các phần màu xanh không thực sự thẳng hàng, chúng dường như được đặt bởi một bàn tay không ổn định. ]

Làm cách nào để hiển thị đường viền bảng trong HTML mà không cần CSS?

Làm cách nào để thay đổi màu đường viền trong HTML mà không cần CSS?