简单的 HTML 表格由 <table> 元素以及一个或多个 tr、th 或 td 元素组成。
tr 元素定义表格行，th 元素定义表头，td 元素定义表格单元。
colspan横向合并单元格、rowspan纵向合并单元格
table{ border-collapse:collapse;}去掉表格的间隙
table th,table td{ border:1px solid #eee;}给表格标题和单元格设置边框为1像素颜色是#eee的实线，加在tr没有反应。
注意的地方
1.table只能用于定义表格，table里只能放tr、caption
2.tr用于定义表格里的一行，tr里只能放td、th
3.td用于定义表格里的一个单元格，td可以容纳所有的元素
4.上述表格内容前三个常用、都可以用 css实现
5.三参为0是指，border="0" cellspacing="0" cellpadding="0"
<td width="70%">January</td>
<td width="30%">$100.00</td>
合并单元格
跨行合并 rowspan、跨列合并 colspan
//去掉表格的间隙
table{ border-collapse:collapse;}
//给表格的标题和单元格的边框设置为1像素颜色是#eee的实线
table th,table td{ border:1px solid #eee;}
表格练习：
20171205135421565.png
<!-- html 部分 -->
<table>
<tbody>
<tr>
<td class="f01">操作系统：</td>
<td>Windows 7</td>
</tr>
<tr>
<td class="f01">CPU：</td>
<td>Intel 或 AMD双核(Dual core) 2.8 GHz</td>
</tr>
</tbody>
</table>
<!-- css 部分 -->
<style>
.main_right .part .chart_box td {
font-size: 14px;
color: #666;
line-height: 1.5;
}
.main_right .part .chart_box td.f01 {
width: 83px;
color: #303030;
font-weight: bold;
text-align: right; /* - 把文本排列到右边。 - */
vertical-align: top; /* - 把元素的顶端与行中最高元素的顶端对齐 - */
}
</style>
8.<table>表格标签
案例
<style media="screen">
td {
text-align: center;
padding: 10px;
}
</style>
<!-- <table>标签写的表格属性都可以用css写出来 -->
<table width="500" align="center" border="1" cellspacing="0" cellpadding="0">
<caption><h3>股票详细信息表</h3></caption>
<thead>
<tr>
<th width="30%" align="right">代码</th>
<th width="70%" colspan="3">跨行合并colspan="3"</th>
<!-- <th>涨跌幅</th> -->
<!-- <th>最新价</th> -->
</tr>
</thead>
<tbody>
<tr>
<td>000892</td>
<td rowspan="2">跨列合并rowspan="2"</td>
<td>欢瑞世纪</td>
<td>9.75</td>
</tr>
<tr>
<td>600776</td>
<!-- <td>10.03%</td> -->
<td>东方通信</td>
<td>6.36</td>
</tr>
</tbody>
</table>
| 表格属性 | 含义 | 常用属性值 |
|---|---|---|
border |
设置表格的边框（默认border="0"无边框） |
像素值 |
align |
设置表格在网页中的水平对齐方式 |
left、center、right |
width |
设置表格的宽度 |
像素值 |
height |
设置表格的高度 |
像素值 |
cellspacing |
设置单元格与单元格边框之间的空白间距 |
像素值（默认2像素） |
cellpadding |
设置单元格内容与单元格边框之间的空白间距 |
像素值（默认1像素） |
注意的地方
1.table只能用于定义表格，table里只能放tr、caption
2.tr用于定义表格里的一行，tr里只能放td、th
3.td用于定义表格里的一个单元格，td可以容纳所有的元素
4.上述表格内容前三个常用、都可以用 css实现
5.三参为0是指，border="0" cellspacing="0" cellpadding="0"
<td width="70%">January</td> <td width="30%">$100.00</td>
合并单元格
跨行合并 rowspan、跨列合并 colspan
7.table{ border-collapse:collapse;}去掉表格的间隙
