Là một website được viết trên công nghệ web Flutter vì vậy hỗ trợ rất tốt cho người học, kể cả những người học khó tính nhất.
Hiện tại website đang tiếp tục được cập nhập nội dung cho phong phú và đầy đủ hơn. Mong các bạn nghé thăm và ủng hộ website mới của chúng tôi.
1- Table borders
Về cơ bản, một bảng có 2 loại viền [border] đó là viền của bảng và viền của các ô, nó giống như hình minh họa dưới đây:
Theo mặc định các ô liền kề nhau không sử dụng chung một viền, mà chúng có các viền tách biệt. Và viền của bảng cũng tách biệt với viền của các ô.
css-table-example.html
CSS Table Border
.table1 {
border: 1px solid red;
}
.table1 th {
border: 1px solid blue;
padding: 5px;
}
.table1 td {
border: 1px dashed green;
padding: 5px;
}
HTML Table Boder
First Name
Last Name
John
Smith
border-spacing
CSS border-spacing áp dụng cho để chỉ định khoảng cách giữa các viền của các ô liền kề. áp dụng cho border-spacing-example.html Một ví dụ khác với CSS border-spacing: CSS border-spacing: Sử dụng CSS border-collapse:collapse để áp dụng cho bảng nếu bạn muốn các ô liền kề sử dụng chung một viền, và chung viền với bảng. Giá trị mặc định của CSS border-collapse là separate. CSS border-collapse:collapse để áp dụng cho bảng nếu bạn muốn các ô liền kề sử dụng chung
một viền, và chung viền với bảng. Giá trị mặc định của CSS border-collapse là separate. Bởi vì mỗi ô có thể sử dụng một kiểu dáng viền [border style] khác nhau. Như vậy với các bảng cụp [Collapsed table] sẽ xẩy ra tình huống xung đột, vì 2 ô liền kề sẽ sử dụng chung một viền. Câu hỏi ở đây là kiểu dáng viền nào sẽ được sử dụng trong trường hợp xung đột? Nếu các viền có cùng chiều rộng [width], thứ tự ưu tiên sẽ là: Chú ý: CSS border-style:none và CSS border-style:hidden là giống nhau, chúng làm cho phần tử không có viền. Chúng chỉ khác biệt khi được áp dụng cho một bảng cụp [Collapsed table]. Khi giải quyết xung đột CSS border-style:hidden được ưu tiên cao nhất, trong khi đó CSS border-style:none được ưu tiên thấp nhất. CSS
border-style:none và CSS border-style:hidden là giống nhau, chúng làm cho phần tử không có viền. Chúng chỉ khác biệt khi được áp dụng cho một bảng cụp [Collapsed table]. Khi giải quyết xung đột CSS border-style:hidden được ưu tiên cao nhất, trong khi đó CSS border-style:none được ưu tiên thấp nhất. css-collapse-table-example2.html Thuộc tính CSS width, CSS height được sử dụng để thiết lập chiều rộng và chiều cao cho bảng, hoặc hàng [row], hoặc cột [column]. CSS width, CSS height được sử dụng để thiết lập chiều rộng và chiều cao cho bảng, hoặc hàng [row], hoặc cột [column]. Chú ý: Một số trình duyệt chỉ coi , , là các bộ chứa [container], vì vậy CSS height không hoạt động khi bạn áp dụng nó cho các phần tử này. Nếu bạn muốn thiết lập chiều cao cho một hàng [row] của bảng bạn cần áp dụng CSS height cho hoặc . , , là các bộ chứa [container], vì vậy CSS height không hoạt động khi bạn áp dụng nó cho các phần tử này. Nếu bạn muốn thiết lập chiều cao cho một hàng [row] của bảng bạn cần áp dụng CSS height cho
hoặc Trong một bảng có nhiều cột, các cột được đánh thứ tự 1, 2, ... Sử dụng CSS th:nth-child[N] để áp dụng kiểu dáng cho cột thứ N của bảng. CSS th:nth-child[N] để áp dụng kiểu dáng cho cột thứ N của bảng. Ví dụ: Một bảng với 3 cột, thiết lập width:40% cho 2 cột đầu tiên và width:20% cho cột thứ 3.width:40% cho 2 cột đầu tiên và width:20% cho cột thứ 3. để chỉ định khoảng cách giữa các viền của các ô
liền kề.
/* */
border-spacing: 2px;
/* horizontal | vertical */
border-spacing: 1cm 2em;
/* Global values */
border-spacing: inherit;
border-spacing: initial;
border-spacing: unset;
CSS Table Border
.table1 {
border: 1px solid red;
border-spacing: 40px;
}
.table1 th {
border: 1px solid blue;
padding: 25px;
}
.table1 td {
border: 1px dashed green;
padding: 25px;
}
HTML Table Boder-spacing
First Name
Last Name
John
Smith
table {
border-spacing: 1em .5em;
padding: 0 2em 1em 0;
border: 1px solid orange;
}
td {
width: 1.5em;
height: 1.5em;
background: #d2d2d2;
text-align: center;
vertical-align: middle;
}
1 2 3
4 5 6
7 8 9
2- Collapsed Table borders
table {
border-collapse: collapse;
border: 1px solid black;
}
table th {
border: 1px solid black;
padding: 5px;
}
table td {
border: 1px solid black;
padding: 5px;
}
CSS Collapsed Table
table {
border-collapse: collapse;
border: 1px solid black;
}
th, td {
padding: 10px;
}
CSS Collapsed Table
border-style:solid;
border-width:1px;
border-color:blue;
border-style:dashed;
border-width:1px;
border-color:red;
border-style:hidden;
border-width:1px;
border-color:green;
border-style:none;
border-width:1px;
border-color:green;
3- CSS Table Width/Height
.
table {
width: 100%;
border-collapse: collapse;
border: 1px solid black;
}
th {
height: 50px;
border: 1px solid black;
}
td {
border: 1px solid black;
}
table {
width: 100%;
border-collapse: collapse;
border: 1px solid black;
}
th:th:nth-child[1], th:th:nth-child[2] {
width: 40%;
}
th:th:nth-child[3] {
width: 20%;
}
th, td {
border: 1px solid black;
}
Chủ Đề