整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
eb前端開發(fā)課程：css文本模塊-垂直對(duì)齊。
講課人：波波老師。
垂直對(duì)齊vertical-align，這個(gè)只能用于在表格中的<td>或者<th>才可以垂直對(duì)齊其他的標(biāo)簽，這個(gè)垂直對(duì)齊的功能是無(wú)效的。我們來(lái)看代碼。
·先來(lái)做一個(gè)<div>，VC看看能不能居中對(duì)齊，垂直居中。比如點(diǎn)VC把它的高度設(shè)為100px。
·來(lái)加個(gè)背景顏色，background-color，可以看到它有一個(gè)灰色的背景色，給它加個(gè)vertical-align，看看這個(gè)middle顯然沒(méi)有效果。
·再來(lái)做一個(gè)表格，table，一個(gè)tr，再來(lái)個(gè)td*3，分別做class="vt"，class="vc"，class="evb"。
·來(lái)做個(gè)table，做一下樣式，把它的寬度設(shè)為100%，然后td，把它的邊框。
·可以看到這個(gè)表格已經(jīng)出來(lái)了，這個(gè)時(shí)候在VC這里做一個(gè)居中對(duì)齊，可以看到它是居中了，底部對(duì)齊，頂部對(duì)齊。
·再加兩個(gè).vt，做一個(gè)頂部對(duì)齊vertical-align：top，可以看到這個(gè)vt已經(jīng)頂部對(duì)齊了。
·再來(lái)做這個(gè).vb的底部對(duì)齊，點(diǎn)vb，vertical-align：bottom，這個(gè)變成底部對(duì)齊了。
演示到這里。
用CSS可以大大提高HTML表格的外觀。
| Company | Contact | Country |
|---|---|---|
| Alfreds Futterkiste | Maria Anders | Germany |
| Berglunds snabbk?p | Christina Berglund | Sweden |
| Centro comercial Moctezuma | Francisco Chang | Mexico |
| Ernst Handel | Roland Mendel | Austria |
| Island Trading | Helen Bennett | UK |
| K?niglich Essen | Philip Cramer | Germany |
| Laughing Bacchus Winecellars | Yoshi Tannamuri | Canada |
| Magazzini Alimentari Riuniti | Giovanni Rovelli | Italy |
| North/South | Simon Crowther | UK |
| Paris spécialités | Marie Bertrand | France |
| The Big Cheese | Liz Nixon | USA |
| Vaffeljernet | Palle Ibsen | Denmark |
表格邊框
指定CSS表格邊框，使用border屬性。
下面的例子指定了一個(gè)表格的Th和TD元素的黑色邊框：
實(shí)例
table, th, td
{
border: 1px solid black;
}
請(qǐng)注意，在上面的例子中的表格有雙邊框。這是因?yàn)楸砗蛅h/ td元素有獨(dú)立的邊界。
為了顯示一個(gè)表的單個(gè)邊框，使用 border-collapse屬性。
折疊邊框
border-collapse 屬性設(shè)置表格的邊框是否被折疊成一個(gè)單一的邊框或隔開：
實(shí)例
table
{
border-collapse:collapse;
}
table,th, td
{
border: 1px solid black;
}
表格寬度和高度
Width和height屬性定義表格的寬度和高度。
下面的例子是設(shè)置100％的寬度，50像素的th元素的高度的表格：
實(shí)例
table
{
width:100%;
}
th
{
height:50px;
}
表格文字對(duì)齊
表格中的文本對(duì)齊和垂直對(duì)齊屬性。
text-align屬性設(shè)置水平對(duì)齊方式，像左，右，或中心：
實(shí)例
td
{
text-align:right;
}
垂直對(duì)齊屬性設(shè)置垂直對(duì)齊，比如頂部，底部或中間：
實(shí)例
td
{
height:50px;
vertical-align:bottom;
}
表格填充
如果在表的內(nèi)容中控制空格之間的邊框，應(yīng)使用td和th元素的填充屬性：
實(shí)例
td
{
padding:15px;
}
表格顏色
下面的例子指定邊框的顏色，和th元素的文本和背景顏色：
實(shí)例
table, td, th
{
border:1px solid green;
}
th
{
background-color:green;
color:white;
}
如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！
.表格的寬度 高度 邊框 <width> <height> <border>
2.表格的背景顏色和圖片 <colcr>顏色背景圖片顏色可通過(guò)<background> <bgcolor>背景顏色
3.表格以及單元格內(nèi)容的對(duì)齊方式 <aligh>分為<right>右對(duì)齊 <center>居中對(duì)齊 <left>左對(duì)齊
4.單元格的填充和間距 <cellspacing>間距 <cellpadding>填充
5.<font>標(biāo)簽可以設(shè)置字體字號(hào)以及顏色
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>優(yōu)化表格</title>
</head>
<body>
<table border="0" width="395" cellpadding="0" cellspacing="0">
<tr>
<td colspan="4" background=""><font color="white"></font><b> 本周暢銷筆記本排名top3<font></font></b></td>
</tr>
</table>
<table>
<tr>
<td>
<table>
<tr>
<td colspan="2">京東超市/td>
</tr>
<tr>
<td colspan="2">< img src="img/1.jpg" alt=""></td>
</tr>
<tr>
<td>< img src="img/人.png" alt=""></td>
<td>< img src="img/羅賓.jpg" alt=""></td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
