HTML - 表格（table）-

简单的 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>

注意的地方
1.table只能用于定义表格，table里只能放tr、caption
2.tr用于定义表格里的一行，tr里只能放td、th
3.td用于定义表格里的一个单元格，td可以容纳所有的元素
4.上述表格内容前三个常用、都可以用 css实现
5.三参为0是指，border="0" cellspacing="0" cellpadding="0"

6.    <td width="70%">January</td>
      <td width="30%">$100.00</td>
   

合并单元格
跨行合并 rowspan、跨列合并 colspan

7.table{ border-collapse:collapse;}去掉表格的间隙