html之表格标签

一，表格标签

<!--
    过去大部分的网站都是表格标签做的,一个时代的代表,现在基本不用了

    表格标签:
    1,格式:<table>
            <tr>
                <td>需要显示的内容</td>
            </tr>
           </table>

     table:代表整个表格
     tr:代表整个表格中的一行数据->行
     td:代表一行数据张的一个单元格->列
    2,注意点:
    (1),表格标签有边框属性,默认是0,设置border值才能才能显示
-->

<table border="1">
    <tr></tr>
        <td>1.1</td>
        <td>1.2</td>
        <td>1.3</td>
    <tr></tr>

    <tr></tr>
        <td>2.1</td>
        <td>2.2</td>
        <td>2.3</td>
    <tr></tr>
</table>

二，表格标签的属性

<!--
    1,宽度和高度的属性(可以按照内容的多少自动调整宽高)
    可以给table和td标签使用,tr标签是不能使用的
    2,水平对齐和垂直对齐属性
    (1)水平对齐:aling,只能给table和tr标签使用
    (2)垂直对齐:valing,只能给tr和td标签使用
    3,外边距和内边距属性
    (1)外边距:cellspacing,单元格与单元格之间的间距,也包括单元格与table边框的间距,他们是统一的
    (2)内边距:cellpadding,填充内容与单元格之间的距离,这个距离是根据对齐方式来的,比如说是右对齐,那么就是距离右边的距离是xxpx
    只能给table标签使用,tr和td标签不能使用

    注意在企业开发中,表格使用css和div做的,这里只是了解一下
-->

<table border="1" width="500px" height="300px" align="center" cellspacing="5px" cellpadding="30px">
    <tr valign="top">
        <td valign="bottom" width="150" height="50">1.1</td>
        <td>1.2</td>
    </tr>
    <tr align="center">
        <td align="right">2.1</td>
        <td valign="bottom">2.2</td>
    </tr>
</table>

三，细线表格

<!--
   在表格标签中通过设置外边距的距离想让边框是一条线是不靠谱的,视觉上会出现两条线
   所以,一般会先设置table的背景颜色,然后再设置tr的背景颜色,最后调整外边距的距离就可以了

    以上内容了解，企业开发不会用的
-->
<table bgcolor="black" cellspacing="1">
    <tr bgcolor="white">
        <td>1.1</td>
        <td>1.2</td>
    </tr>
    <tr bgcolor="white">
        <td>2.1</td>
        <td>2.2</td>
    </tr>
</table>

五，表格标签其他的属性

<!--
    表格标题标签 caption
    1,格式:<caption></caption>
    2,注意点
    (1)caption标签只能放在table标签里面,放在外边无效
    (2)caption标签一定要紧跟在table标签后边

    单元格标题标签 th
    1,格式: <th></th>

    单元格标签有两种,
    一种是td,普通的单元格标签
    一种是th,每一列单元格的标题标签,默认是加粗,居中的
-->
<table bgcolor="black" cellspacing="1" width="800px" align="center">
    <caption>
        <h2>今日小说排行榜</h2>
    </caption>
    <tr bgcolor="#d3d3d3">
        <th>排名</th>
        <th>关键词</th>
        <th>趋势</th>
        <th>今日搜索</th>
        <th>最近七日</th>
        <th>相关链接</th>
    </tr>
    <tr bgcolor="white" align="center">
        <td>1</td>
        <td align="left">暴走大事件</td>
        <td>走高</td>
        <td>23654523</td>
        <td>52614432</td>
        <td>
            <a href="#">贴吧</a>
            <a href="#">图片</a>
            <a href="#">百科</a>
        </td>
    </tr>
    <tr bgcolor="white" align="center">
        <td>1</td>
        <td align="left">暴走大事件</td>
        <td>走高</td>
        <td>23654523</td>
        <td>52614432</td>
        <td>
            <a href="#">贴吧</a>
            <a href="#">图片</a>
            <a href="#">百科</a>
        </td>
    </tr>
    <tr bgcolor="white" align="center">
        <td>1</td>
        <td align="left">暴走大事件</td>
        <td>走高</td>
        <td>23654523</td>
        <td>52614432</td>
        <td>
            <a href="#">贴吧</a>
            <a href="#">图片</a>
            <a href="#">百科</a>
        </td>
    </tr>
    <tr bgcolor="white" align="center">
        <td>1</td>
        <td align="left">暴走大事件</td>
        <td>走高</td>
        <td>23654523</td>
        <td>52614432</td>
        <td>
            <a href="#">贴吧</a>
            <a href="#">图片</a>
            <a href="#">百科</a>
        </td>
    </tr>
    <tr bgcolor="white" align="center">
        <td>1</td>
        <td align="left">暴走大事件</td>
        <td>走高</td>
        <td>23654523</td>
        <td>52614432</td>
        <td>
            <a href="#">贴吧</a>
            <a href="#">图片</a>
            <a href="#">百科</a>
        </td>
    </tr>
</table>

六，单元格合并

<!--
    1,水平方向的单元格合并
    可以给td标签添加colspan属性(合并单元格的意思)
    例如,<td colspan="2"></td>,把当前的单元格按照2个单元个看待
    2,垂直方向的单元格合并
    可以给td标签添加rowspan属性,(单元格占得行数)
    例如,<td rowspan="2"></td>
    把当前的单元格向下合并两个单元格,并且要删除单枪单元格下面的一个单元格
-->

<!--<table bgcolor="black" width="500px" height="300px">-->
    <!--<tr bgcolor="white">-->
        <!--<td colspan="2"></td>-->
        <!--<td></td>-->
        <!--<td></td>-->
    <!--</tr>-->
    <!--<tr bgcolor="white">-->
        <!--<td></td>-->
        <!--<td></td>-->
        <!--<td></td>-->
    <!--</tr>-->
    <!--<tr bgcolor="white">-->
        <!--<td></td>-->
        <!--<td></td>-->
        <!--<td colspan="2"></td>-->
    <!--</tr>-->
<!--</table>-->

<table bgcolor="black" width="500px" height="300px">
    <tr bgcolor="white">
        <td rowspan="2"></td>
        <td></td>
        <td></td>
    </tr>
    <tr bgcolor="white">
        <td></td>
        <td></td>
        <!--<td></td>-->
    </tr>
    <tr bgcolor="white">
        <td></td>
        <td></td>
        <td></td>
    </tr>
</table>