<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<style type="text/css">
table{
/* 寬度 */
width: 300px;
/* 居中 */
margin: 0 auto;
/* 邊框 */
border: black 1px solid;
/*
table和td邊框之間默認有距離
通過border-spacing屬性可以設置這個距離
*/
border-spacing: 0px;
/*
border-collapse可用來設置邊框合併
*/
border-collapse: collapse;
}
td , th{
border: 1px solid black;
}
/* 鼠標移動變色 */
tr:hover{
background-color: yellow;
}
/* 隔行變色 */
tr:nth-child(odd){
/* even偶數行，odd奇數行 */
background-color: pink;
}
</style>
</head>
<body>
<!--
table(塊元素)創建表格
用tr表示一行
在tr中用td創建一個單元格
幾行幾個tr,幾個格子幾個td
-->
<!-- rowspan縱向合併單元格 數字幾就合併幾個 -->
<!-- <td rowspan="2">A3</td> -->
<!-- colspan橫向合併單元格 -->
<!-- <table border="200" width="40%" align="center"> -->
<table width="40%" align="center">
<tr>
<!--
可以使用th標籤表示表頭的內容
用法和td一樣，但是有些特殊效果
-->
<th>學號</th>
<th>姓名</th>
<th>性別</th>
<th>地址</th>
</tr>
<tr>
<td>1</td>
<td>唐僧</td>
<td>男</td>
<td>大唐</td>
<tr>
<td>2</td>
<td>悟空</td>
<td>男</td>
<td>花果山</td>
</tr>
<tr>
<td>3</td>
<td>八戒</td>
<td>男</td>
<td>高老莊</td>
</tr>
<tr>
<td>4</td>
<td>沙僧</td>
<td>男</td>
<td>流沙河</td>
</tr>
</table>
</body>
</html>
CSS16.表格
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章
CSS19. 條件Hack&&屬性Hack
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"/> <style type="text/css"> .box1