Hiển thị css: bảng

  • Trang chủ
  • Tham khảo
  • CSS
  • Thuộc tính hiển thị

Nội dung chính Hiển thị

  • Định nghĩa và sử dụng
  • Constructor
  • viết CSS
  • Thuộc tính hiển thị được hỗ trợ trong nhiều trình duyệt
  • Thuộc tính hiển thị

Định nghĩa và sử dụng

Thuộc tính hiển thị định nghĩa các loại hiển thị của thành phần

Constructor

tag {
    display: giá trị;
}

With the value as after

Thuộc tính giá trịVí dụmô tả khối hiển thị. block;Thành phần được hiển thị dưới dạng một khối, khi sử dụng giá trị khối thành phần sẽ đứng một hàng độc lập so với thành phần trước và sau nó. inlinedisplay. inline;Thành phần sẽ hiển thị như một nội tuyến (nội tuyến, không ngắt dòng), đây là định dạng mặc định. inline-blockdisplay. inline-block;Thành phần sẽ hiển thị như một khối, nhưng là một khối nội tuyến. inline-tabledisplay. inline-table;Thành phần sẽ hiển thị như một khối nội tuyến, đối xử tương tự , không ngắt dòng trước và sau thành phần. list-itemdisplay. list-item;Thành phần sẽ hiển thị dưới dạng một khối và một tuyến nội tuyến cho các điểm đánh dấu danh sách. không hiển thị. none;Thành phần không hiển thị. chạy trong màn hình. run-in;Thành phần sẽ hiển thị dưới dạng một khối hoặc một tuyến nội tuyến, tùy thuộc vào bối cảnh. bày bàn. table;Thành phần sẽ đối xử như một bảng, ngắt dòng trước và sau thành phần. hiển thị chú thích bảng. table-caption;Thành phần sẽ đối xử như một bảng. hiển thị ô bảng. table-cell;Thành phần sẽ được xử lý như một ô trong bảng. hiển thị bảng-cột. table-column;Thành phần sẽ đối xử như một cột trong bảng. hiển thị bảng-cột-nhóm. table-column-group;Thành phần sẽ được xử lý như một nhóm cột () trong bảng. table-footer-groupdisplay. table-footer-group;Thành phần sẽ đối xử như một footer nhóm () trong bảng. table-header-groupdisplay. table-header-group;Thành phần sẽ đối xử như một tiêu đề nhóm () trong bảng. hiển thị hàng-bảng. table-row;Thành phần sẽ được xử lý như một hàng trong bảng. bảng-hàng-nhómhiển thị. table-row-group;Thành phần sẽ đối xử như một nhóm hàng trong bảng. kế thừa. kế thừa;Xác định quyền thừa kế thuộc tính từ thành phần cha (thành phần bao bên ngoài)

viết HTML

<html>
<head></head>
<body>
<p>HỌC WEB CHUẨN : </p>
<p>Kiến thức nhỏ cho web hiện đại</p>
</body>
</html>

Show the browser when not have CSS

HỌC WEB CHUẨN

Kiến thức nhỏ cho web hiện đại

viết CSS

Show the browser when has CSS

HỌC WEB CHUẨN

Kiến thức nhỏ cho web hiện đại

viết CSS

Show the browser when has CSS

Support browser

Thuộc tính hiển thị được hỗ trợ trong nhiều trình duyệt

  • HTML/XHTML
  • CSS
  • lớp
  • Giá trị "inline-table", "run-in", "table", "table-caption", "table-cell", "table-column", "table-column-group", "table-row", . loại tài liệu
  • Giá trị "inline-table", "run-in", "table", "table-caption", "table-cell", "table-column", "table-column-group", "table-row", . loại tài liệu
  • Giá trị "inline-table", "run-in", "table", "table-caption", "table-cell", "table-column", "table-column-group", "table-row", . loại tài liệu
  • Giá trị "inline-table", "run-in", "table", "table-caption", "table-cell", "table-column", "table-column-group", "table-row", . loại tài liệu
  • Giá trị "inline-table", "run-in", "table", "table-caption", "table-cell", "table-column", "table-column-group", "table-row", . loại tài liệu
  • Giá trị "inline-table", "run-in", "table", "table-caption", "table-cell", "table-column", "table-column-group", "table-row", . loại tài liệu
  • Giá trị "inline-table", "run-in", "table", "table-caption", "table-cell", "table-column", "table-column-group", "table-row", . loại tài liệu
  • Giá trị "inline-table", "run-in", "table", "table-caption", "table-cell", "table-column", "table-column-group", "table-row", . loại tài liệu
  • Giá trị "inline-table", "run-in", "table", "table-caption", "table-cell", "table-column", "table-column-group", "table-row", . loại tài liệu
  • Trang chủ
  • Tham khảo
  • CSS
  • Ví dụ về thuộc tính hiển thị

Thuộc tính hiển thị

Thuộc tính hiển thị. verify type of display of the section

trưng bày. khối;

Thuộc tính hiển thị. khối;. Thành phần được hiển thị dưới dạng một khối, khi sử dụng giá trị khối thành phần sẽ là một hàng độc lập so với thành phần trước và sau nó. hiển thị. chặn; . Thành phần được hiển thị dưới dạng một khối, khi sử dụng giá trị khối thành phần sẽ là một hàng độc lập so với thành phần trước và sau nó.

<html>
<head>
<style type="text/css">
span {
    background: red;
    display: block;
}
</style>
</head>

<body>
<p>Đây là ví dụ cho <span>display</span> sử dụng giá trị block.</p>
</body>
</html>

Đây là ví dụ hiển thị khối giá trị sử dụng. hiển thị sử dụng khối giá trị.

trưng bày. nội tuyến;

Thuộc tính hiển thị. nội tuyến;. Thành phần sẽ hiển thị như một tuyến nội tuyến (nội tuyến, không ngắt dòng), đây là định dạng mặc định. hiển thị. nội tuyến; . Thành phần sẽ hiển thị như một tuyến nội tuyến (nội tuyến, không ngắt dòng), đây là định dạng mặc định.

<html>
<head>
<style type="text/css">
span {
    background: red;
    display: inline;
}
</style>
</head>

<body>
<p>Đây là ví dụ cho <span>display</span> sử dụng giá trị inline.</p>
</body>
</html>

Đây là ví dụ hiển thị sử dụng giá trị nội tuyến. hiển thị sử dụng giá trị nội tuyến.

trưng bày. chặn Nội tuyến;

Thuộc tính hiển thị. chặn Nội tuyến;. Thành phần sẽ hiển thị như một khối, nhưng là một khối nội tuyến. hiển thị. khối nội tuyến; . Thành phần sẽ hiển thị như một khối, nhưng là một khối nội tuyến.

<html>
<head>
<style type="text/css">
span {
    background: red;
    display: inline-block;
}
</style>
</head>

<body>
<p>Đây là ví dụ cho <span>display</span> sử dụng giá trị inline-block.</p>
</body>
</html>

Đây là ví dụ hiển thị sử dụng giá trị khối nội tuyến. hiển thị sử dụng inline-block value.

trưng bày. bảng nội tuyến;

Thuộc tính hiển thị. bảng nội tuyến;. Thành phần sẽ hiển thị dưới dạng một khối nội tuyến, đối tự xử lý , không ngắt dòng trước và sau thành phần. hiển thị. bảng nội tuyến; . Thành phần sẽ hiển thị dưới dạng một khối nội tuyến, đối tượng tương tự

, không ngắt dòng trước và sau thành phần.
<html>
<head>
<style type="text/css">
span {
    background: red;
    display: inline-table;
}
</style>
</head>

<body>
<p>Đây là ví dụ cho <span>display</span> sử dụng giá trị inline-table.</p>
</body>
</html>

Đây là ví dụ hiển thị sử dụng inline-table value. hiển thị sử dụng inline-table value.

trưng bày. danh-mục;

Thuộc tính hiển thị. danh-mục;. Thành phần sẽ hiển thị dưới dạng một khối và một tuyến nội tuyến cho các điểm đánh dấu danh sách. hiển thị. danh sách-mục; . Thành phần sẽ hiển thị dưới dạng một khối và một tuyến nội tuyến cho các điểm đánh dấu danh sách.

<html>
<head>
<style type="text/css">
span {
    background: red;
    display: list-item;
}
</style>
</head>

<body>
<p>Đây là ví dụ cho <span>display</span> sử dụng giá trị list-item.</p>
</body>
</html>

Đây là ví dụ hiển thị sử dụng giá trị danh sách-mục. hiển thị sử dụng giá trị danh sách mục.

trưng bày. không ai;

Thuộc tính hiển thị. không ai;. Thành phần không hiển thị. hiển thị. không; . Thành phần không hiển thị.

<html>
<head>
<style type="text/css">
span {
    background: red;
    display: none;
}
</style>
</head>

<body>
<p>Đây là ví dụ cho <span>display</span> sử dụng giá trị none.</p>
</body>
</html>

Đây là ví dụ hiển thị sử dụng giá trị none. hiển thị sử dụng giá trị none.

trưng bày. bàn;

Thuộc tính hiển thị. bàn;. Thành phần sẽ đối xử như một , ngắt dòng trước và sau thành phần. hiển thị. bảng; . Thành phần sẽ được xử lý như một

, ngắt dòng trước và sau thành phần. ________số 8

Đây là ví dụ hiển thị sử dụng bảng giá trị. hiển thị sử dụng bảng giá trị.

hiển thị. bàn; . bảng chú thích; . bảng-ô; . bảng-cột; . bảng-cột-nhóm; . bảng-chân-nhóm; . bảng-tiêu đề-nhóm; . bàn-hàng; . table-row-group;
hiển thị. table-caption;
hiển thị. ô bảng;
hiển thị. bảng-cột;
hiển thị. bảng-cột-nhóm;
hiển thị. table-footer-group;
hiển thị. table-header-group;
hiển thị. table-row;
hiển thị. nhóm-hàng-bảng;

Các thuộc tính hiển thị trên được sử dụng để định nghĩa tương tự như các phần tử của bảng. display on used to định nghĩa tương tự như các phần tử của bảng.

<html>
<head>
<style type="text/css">
div.table {
    border-collapse: collapse;
    display: table;
    width: 200px;
}

div.caption {
    display: table-caption;
}

div.tHead {
    display: table-header-group;
    font-weight: bold;
}

div.tCell {
    border: 1px solid #ccc;
    display: table-cell;
}

div.tRow {
    display: table-row;
}

div.tFoot {
    display: table-footer-group;
}
</style>
</head>

<body>
<div class="table">
<div class="caption">Caption của table</div>
<div class="tHead">
<div class="tCell">A1</div>
<div class="tCell">A2</div>
</div>

<div class="tRow">
<div class="tCell">B1</div>
<div class="tCell">B2</div>
</div>

<div class="tRow">
<div class="tCell">C1</div>
<div class="tCell">C2</div>
</div>

<div class="tFoot">
<div class="tCell">D1</div>
<div class="tCell">D2</div>
</div>
</div>
</body>
</html>

Giá trị hiển thị trên bảng tương tự sau đây

<html>
<head></head>
<body>
<p>HỌC WEB CHUẨN : </p>
<p>Kiến thức nhỏ cho web hiện đại</p>
</body>
</html>
0

Chú thích của bảng

A1A2B1B2C1C2D1D2