1.表格
<!-- 在HTML中，使用table標簽來創建一個表格 -->
<!-- 在table標簽中使用tr來表示表格中的一行，有幾行就有幾對tr -->
<tr>
<!-- 在tr中需要使用td來創建一個單元格，有幾個單元格就有幾個td -->
<td>A1</td>
<td>A2</td>
<td>A3</td>
<td>A4</td>
</tr>
<tr>
<td>B1</td>
<td>B2</td>
<td>B3</td>
<!-- rowspan用來設置縱向的合并單元格 -->
B4</td>
</tr>
<tr>
<td>C1</td>
<td>C2</td>
<td>C3</td>
</tr>
<tr>
<td>D1</td>
<td>D2</td>
<!-- colspan橫向的合并單元格 -->
D3</td>
2.給表格添加樣式
/*設置表格的寬度*/
width: 300px;
/*居中*/
margin: 0 auto;
/*邊框*/
? ? ? ? ? ? /*border:1px solid black;*/
? ? ? ? ? ? /*table和td邊框之間默認有一個距離，通過border-spacing屬性可以設置這個距離*/
? ? ? ? ? ? /*border-spacing: 10px;*/
? ? ? ? ? ? /*
? ? ? ? ? ? border-collapse可以用來設置表格的邊框合并
? ? ? ? ? ? 如果設置了邊框合并，則border-spacing自動失效
? ? ? ? ? ? */
? ? ? ? ? ? border-collapse: collapse;
? ? ? ? ? ? /*設置背景樣式*/
/*background-color: #bfa;*/
}
/*設置邊框*/
th, td{
border: 1px solid black;
}
/*設置隔行變色*/
tbody > tr:nth-child(even){
background-color: #bfa;
}
/*鼠標移入到tr以后，改變顏色*/
tr:hover{
background-color: yellow;
}
</style>
</head>
<body>
<table>
<tr>
可以使用th標簽來表示表頭中的內容，
它的用法和td一樣，不同的是它會有一些默認效果
3.長表格
有一些情況下表格是非常的長的，這時就需要將表格分為三個部分，表頭，表格的主體，表格底部
在HTML中為我們提供了三個標簽：
thead 表頭
tbody 表格主體
tfoot 表格底部
這三個標簽的作用，就來區分表格的不同的部分，他們都是table的子標簽，都需要直接寫到table中，tr需要寫在這些標簽當中
thead中的內容，永遠會顯示在表格的頭部
tfoot中的內容，永遠都會顯示表格的底部
tbody中的內容，永遠都會顯示表格的中間
如果表格中沒有寫tbody，瀏覽器會自動在表格中添加tbody
并且將所有的tr都放到tbody中，所以注意tr并不是table的子元素，而是tbody的子元素
通過table > tr 無法選中行 需要通過tbody > tr
4.表格的布局
以前表格更多的情況實際上是用來對頁面進行布局的，但是這種方式早已被CSS所淘汰了
表格的列數由td最多的那行決定
表格是可以嵌套，可以在td中在放置一個表格
