2.表格

最新推荐文章于 2022-07-03 19:36:46 发布

郭振澳

最新推荐文章于 2022-07-03 19:36:46 发布

阅读量205

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/u011513939/article/details/74051408

版权

css 专栏收录该内容

35 篇文章 0 订阅

订阅专栏

表格

table
border
height 高
width 宽
cellpadding 内边距
cellspacing 外边距
bgcolor 背景颜色
background 背景图片

caption 表格标题
tr
th
td
align left center right
vaglin top middle bottom
rowspan 行合并
colspan 列合并
col  针对每一列,设置列宽

例子：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>表格</title>
</head>
<body>
    <!-- 
        table
            border  边框
            width   宽度
            height  高度
            cellspacing   外边距   单元格与单元格之间的距离
            cellpadding   内边距   单元格与内容之间的距离
            bgcolor       背景颜色
            background    背景图片


        caption  表格标题

        tr       表行  一行
            align   水平对齐方式   left   center   right
            valign  垂直对齐方式   top    middle   bottom



        th       表头单元格  自带加粗和居中
        td       普通单元格  
            rowspan   行合并
            colspan   列合并

    作业:
        用表格做一张简历


     -->


    <table border='1px' width='800px' height='800px' cellspacing='0px' cellpadding="0px" >
        <col width='10%'><col width='5%'>
        <!-- 表格标题 -->
        <caption>课程表</caption>
        <!-- 表头 -->
        <tr>
            <th colspan='2'></th>
            <!-- <th></th> -->
            <th>周一</th>
            <th>周二</th>
            <th>周三</th>
            <th>周四</th>
            <th>周五</th>
            <th>周六</th>
            <th>周末</th>
        </tr>

        <!-- 表格正文 -->
        <tr align='center'>
            <td rowspan='4' width='50px'>上午</td>
            <td>1</td>
            <td rowspan="2">美术</td>
            <td rowspan="2">体育</td>
            <td rowspan="2">自习</td>
            <td rowspan="2">睡觉</td>
            <td rowspan="2">电脑</td>
            <td rowspan="2">游戏</td>
            <td rowspan="2">睡觉</td>
        </tr>
        <tr align='center'>
            <!-- <td>上午</td> -->
            <td>2</td>
        <!--    <td>美术</td>
            <td>体育</td>
            <td>自习</td>
            <td>睡觉</td>
            <td>电脑</td>
            <td>游戏</td>
            <td>睡觉</td> -->
        </tr>
        <tr align='center'>
            <!-- <td>上午</td> -->
            <td>3</td>
            <td>美术</td>
            <td>体育</td>
            <td>自习</td>
            <td>睡觉</td>
            <td>电脑</td>
            <td>游戏</td>
            <td>睡觉</td>
        </tr>
        <tr align='center'>
            <!-- <td>上午</td> -->
            <td>4</td>
            <td>美术</td>
            <td>体育</td>
            <td>自习</td>
            <td>睡觉</td>
            <td>电脑</td>
            <td>游戏</td>
            <td>睡觉</td>
        </tr>
        <tr>
            <td colspan='9' align='center'>午休</td>
        </tr>
        <tr>
            <td>下午</td>
            <td>5</td>
            <td align='right' valign='top'>美术</td>
            <td>体育</td>
            <td>自习</td>
            <td>睡觉</td>
            <td>电脑</td>
            <td>游戏</td>
            <td>睡觉</td>
        </tr>
        <tr>
            <td>下午</td>
            <td>6</td>
            <td>美术</td>
            <td>体育</td>
            <td>自习</td>
            <td>睡觉</td>
            <td>电脑</td>
            <td>游戏</td>
            <td>睡觉</td>
        </tr>
        <tr>
            <td>下午</td>
            <td>7</td>
            <td>美术</td>
            <td>体育</td>
            <td>自习</td>
            <td>睡觉</td>
            <td>电脑</td>
            <td>游戏</td>
            <td>睡觉</td>
        </tr>
        <tr>
            <td>下午</td>
            <td>8</td>
            <td>美术</td>
            <td>体育</td>
            <td>自习</td>
            <td>睡觉</td>
            <td>电脑</td>
            <td>游戏</td>
            <td>睡觉</td>
        </tr>
        <tr>
            <td>回家玩去吧</td>
        </tr>


    </table>

</body>
</html>