Ví dụ về thuộc tính display

Thuộc tính display

Thuộc tính display : xác định loại hiển thị của thành phần.

display: block;

Thuộc tính display: block; : Thành phần hiển thị như một khối, khi sử dụng giá trị block 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ó.

<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ụ cho display sử dụng giá trị block.

display: inline;

Thuộc tính display: inline; : Thành phần sẽ hiển thị như một nội tuyến (inline, không ngắt dòng), đây là 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ụ cho display sử dụng giá trị inline.

display: inline-block;

Thuộc tính display: 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.

<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ụ cho display sử dụng giá trị inline-block.

display: inline-table;

Thuộc tính display: inline-table; : Thành phần sẽ hiển thị như một khối nội tuyến, đối xử tương tự <table>, 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ụ cho display sử dụng giá trị inline-table.

display: list-item;

Thuộc tính display: list-item; : Thành phần sẽ hiển thị như một khối và một 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ụ cho display sử dụng giá trị list-item.

display: none;

Thuộc tính display: none; : 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ụ cho display sử dụng giá trị none.

display: table;

Thuộc tính display: table; : Thành phần sẽ đối xử như một <table>, ngắt dòng trước và sau thành phần.

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

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

Đây là ví dụ cho display sử dụng giá trị table.

display: table;
display: table-caption;
display: table-cell;
display: table-column;
display: table-column-group;
display: table-footer-group;
display: table-header-group;
display: table-row;
display: table-row-group;

Các thuộc tính display trên dùng để định nghĩa tương tự như các phần tử của table.

<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>

Caption của table

Giá trị display ở trên tương tự table sau đây:

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

table caption {
    text-align: left;
}

table th {
    border: 1px solid #ccc;
    text-align: left;
}

table td {
    border: 1px solid #ccc;
}
</style>
</head>

<body>
<table>
<caption>Caption của table</caption>
<thead>
<tr>
<th>A1</th>
<th>A2</th>
</tr>
</thead>

<tr>
<td>B1</td>
<td>B2</td>
</tr>

<tr>
<td>C1</td>
<td>C2</td>
</tr>

<tfoot>
<tr>
<td>D1</td>
<td>D2</td>
</tr>
</tfoot>
</table>
</body>
</html>

Caption của table
A1	A2
B1	B2
C1	C2
D1	D2