第七十五節，CSS表格與列表

時間 2019-11-12

標籤第七十五 css 表格列表欄目 CSS 简体版

原文原文鏈接

CSS表格與列表html

學習要點：
1.表格樣式
2.列表樣式
3.其餘功能ide

一．表格樣式
表格有五種獨有樣式，樣式表以下：佈局

屬性　　　　值　　　　說明　　　　　　　　　　CSS版本學習

border-collapse 　　邊框樣式　　　　　　相鄰單元格的邊框樣式 2url

border-spacing 　　長度值　　　　　　相鄰單元格邊框的間距　 2spa

caption-side 　　位置名稱　　　　　　表格標題的位置　　2code

empty-cells 　　顯示值　　　　　　空單元格是否顯示邊框　　2htm

table-layout 　　佈局樣式　　　　　　指定表格的佈局樣式　2對象

border-collapse單元格相鄰的邊框被合併blog

值說明　　　　　　　　 CSS版本

separate 　　默認值，單元格邊框獨立 2

collapse 　　單元格相鄰邊框被合併 2

table{
    border-collapse: collapse;
}

<table border="1">
    <tr>
        <th>1</th>
        <th>2</th>
        <th>3</th>
    </tr>
    <tr>
        <td>4</td>
        <td>5</td>
        <td>6</td>
    </tr>
</table>

border-spacing設置單元格之間的間距

解釋：border-collapse:separate;（默認）的狀態下才有效。由於要設置間距，不能合併。

值說明　　　　　　　　　　　　 CSS版本

長度值　　 0表示間距，其餘使用CSS長度值 2

table{
    border-spacing: 10px;
}

<table border="1">
    <tr>
        <th>1</th>
        <th>2</th>
        <th>3</th>
    </tr>
    <tr>
        <td>4</td>
        <td>5</td>
        <td>6</td>
    </tr>
</table>

caption-side設置表格標題位置

值說明　　　　　　CSS版本

top 　　　　默認值，標題在上方 2

bottom 　　標題在下方 2

table{
    border-spacing: 10px;
    caption-side: bottom;
}

<table border="1">
    <caption>這是一張表</caption>
    <tr>
        <th>1</th>
        <th>2</th>
        <th>3</th>
    </tr>
    <tr>
        <td>4</td>
        <td>5</td>
        <td>6</td>
    </tr>
</table>

empty-cells單元格內容爲空時隱藏邊框

值說明　　　　　　 CSS版本

sho 　　　　默認值，顯示邊框 2

hide 　　不顯示邊框 2

table{
    border-spacing: 10px;
    empty-cells: hide;
}

<table border="1">
    <tr>
        <th>1</th>
        <th>2</th>
        <th>3</th>
    </tr>
    <tr>
        <td>4</td>
        <td>5</td>
        <td></td>
    </tr>
</table>

table-layout內容過長後，不會拉伸整個單元格

注意：要設置了表格的寬度和高度後有用

值說明　　　　　　　　　　　　CSS版本

auto 　　　　默認值，內容過長時，拉伸整個單元格 2

fixed 　　內容過長時，不拉伸整個單元格 2

table{
    width: 400px;
    height: 300px;
    text-align: center;
    table-layout: fixed;
}

<table border="1">
    <tr>
        <th>1</th>
        <th>2</th>
        <th>3</th>
    </tr>
    <tr>
        <td>4這個表格的內容加長了</td>
        <td>5</td>
        <td>6</td>
    </tr>
</table>

vertical-align屬性用於表格內容垂直對齊

在<table>中<td>單元格，咱們能夠使用文本text-align屬性水平對齊，可是垂直對齊就沒法操做了。CSS提供了vertical-align屬性用於垂直對齊。

值說明　　　　　　CSS版本

baseline 　　　內容對象與基線對齊 1

top 　　　內容對象與頂端對齊 1

middle 　　　內容對象與中部對齊 1

bottom 　　　內容對象與底部對齊 1

table{
    width: 400px;
    height: 300px;
}
table td{
    vertical-align: bottom;
}

<table border="1">
    <tr>
        <th>1</th>
        <th>2</th>
        <th>3</th>
    </tr>
    <tr>
        <td>4</td>
        <td>5</td>
        <td>6</td>
    </tr>
</table>

vertical-align屬性用於上標和下標

值說明　　　　　　 CSS版本

sub 　　　　垂直對齊文本的下標 1

super 　　　垂直對齊文本的上標

b{
    vertical-align: sub;
}

<div>html<b>5</b></div>

vertical-align屬性用於其餘元素的文本垂直對齊

解釋：負值往下，正值往上。若是默認基線在上面，用負數。若是默認基線在下面，用正值。

值說明　　　　　　　　　　　　 CSS版本

長度值　　　　設置上下的偏移量，能夠是負值 1

百分比　　　　同上 1

div{
    background-color: #bec7ff;
    width: 400px;
    height: 300px;
    text-align: center;
}
div span{
    vertical-align: -10px;
}

<div><span>這是一段文本</span></div>

二．列表樣式
列表有四種獨有樣式，樣式表以下：

屬性　　　　值　　　　說明　　　　　　　　CSS版本

list-style-type 　　類型值　　　　　列表中的標記類型 1/2

list-style-image 　　　　 none或url 　　　　　圖像做爲列表標記 1

list-style-position 　　位置值　　　　　排列的相對位置 1

list-style 　　　　簡寫屬性　　　　　　列表的簡寫形式 1

list-style-type列表前綴的標記類型

值說明 CSS版本

none 　　　　沒有標記 1

disc 　　　　實心圓 1

circle 　　　　空心圓 1

square 　　　實心方塊 1

decimal 　　　阿拉伯數字 1

lower-roman 　　小寫羅馬數字 1

upper-roman 　　大寫羅馬數字 1

lower-alpha 　　小寫英文字母 1

upper-roman 　　大寫英文字母 1

ul{
    list-style-type: none;
}

<ul>
    <li>列表1</li>
    <li>列表2</li>
    <li>列表3</li>
    <li>列表4</li>
</ul>

list-type-position標記位於內容框的內部

值說明　　　　　　　　　　CSS版本

outside 　　　　默認值，標記位於內容框外部 1

inside 　　　　標記位於內容框內部 1

ul{
    list-style-position: inside;
}

<ul>
    <li>列表1</li>
    <li>列表2</li>
    <li>列表3</li>
    <li>列表4</li>
</ul>

list-type-image使用圖片做爲前綴的標記

值說明 CSS版本

none 　　不使用圖像 1

url 　　　　經過url使用圖像 1

ul{
    list-style-image: url("bullet.png");
}

<ul>
    <li>列表1</li>
    <li>列表2</li>
    <li>列表3</li>
    <li>列表4</li>
</ul>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。