Web前端——表格及课表实例

table标签

1. 相关属性：

属性	含义
border	表格边框
cellpadding	设置单元格内填充
cellspacing	设置单元格间空隙
width	设置表格宽度，默认是内容撑起来的宽度
align	设置表格本身对齐方式

2. 子元素：
   1、caption:代表标题
   2、col：代表虚拟列
   相关属性：
   span:设置合并的列数
   3、tr:代表行
   相关属性：
   align:设置行中每个单元格中内容的对齐方式
   子元素：
   4、td:代表单元格
   -相关属性：
   -width:设置单元格的宽度，这一列中最宽的单元格的宽度是这一列的宽度
   -align:单元格内容的对齐方式
   -rowspan:设置单元格合并的行数
   -colspan:设置单元格合并的列数

   5、th:代表标题单元格（与普通单元格的区别：居中，加粗）
   -相关属性：
   -width:设置单元格的宽度，这一列中最宽的单元格的宽度是这一列的宽度
   -align:单元格内容的对齐方式
   -rowspan:设置单元格合并的行数
   -colspan:设置单元格合并的列数

课表代码及效果

<table border="1" cellpadding="0" cellspacing="0">
    <caption style="font-size:30px;">课表</caption>
    <col style="font-size:30px;">
    <tr align="center" width="350">
        <td width="100" align="center"></td>
        <td width="100">周一</td>
        <td width="100">周二</td>
        <td width="100">周三</td>
        <td width="100">周四</td>
        <td width="100">周五</td>
        <td width="100">周六</td>
        <td width="100">周日</td>
    </tr>
    <tr align="center" width="350">

        <td width="100">第一节</td>
        <td width="100">大四自习</td>
        <td width="100">大四自习</td>
        <td width="100">上课</td>
        <td width="100">上课</td>
        <td width="100">大四自习</td>
        <td width="100" rowspan="12">休息</td>
        <td width="100">上课</td>
    </tr>
    <tr align="center" width="350">
        <td width="100">第二节</td>
        <td width="100">大四自习</td>
        <td width="100">大四自习</td>
        <td width="100">上课</td>
        <td width="100">上课</td>
        <td width="100">大四自习</td>

        <td width="100">上课</td>
    </tr>
    <tr align="center" width="350">
        <td width="100">第三节</td>
        <td width="100">大四自习</td>
        <td width="100">大四自习</td>
        <td width="100">上课</td>
        <td width="100">上课</td>
        <td width="100">大四自习</td>
        <td width="100">上课</td>
    </tr>
    <tr align="center" width="350">
        <td width="100" colspan="6">午休</td>
    </tr>
    <tr align="center" width="350">
        <td width="100">第四节</td>
        <td width="100">上课</td>
        <td width="100">大四自习</td>
        <td width="100">上课</td>
        <td width="100">上课</td>
        <td width="100" rowspan="2">上课</td>
        <td width="100">上课</td>
    </tr>
    <tr align="center" width="350">
        <td width="100">第五节</td>
        <td width="100">上课</td>
        <td width="100">大四自习</td>
        <td width="100">上课</td>
        <td width="100">上课</td>


        <td width="100">上课</td>
    </tr>
    <tr align="center" width="350">
        <td width="100">第六节</td>
        <td width="100">上课</td>
        <td width="100">大四自习</td>
        <td width="100">上课</td>
        <td width="100">上课</td>
        <td width="100" rowspan="2">上课</td>

        <td width="100">上课</td>

    </tr>
    <tr align="center" width="350">
        <td width="100">第七节</td>
        <td width="100">上课</td>
        <td width="100">大四自习</td>
        <td width="100">上课</td>
        <td width="100">上课</td>


        <td width="100">上课</td>
    </tr>
    <tr align="center" width="350">
        <td width="100" colspan="6">晚饭</td>
    </tr>
    <tr align="center" width="350">
        <td width="100">第八节</td>
        <td width="100">大四自习</td>
        <td width="100">大四自习</td>
        <td width="100">大四自习</td>
        <td width="100">上课</td>
        <td width="100">上课</td>
        <td width="100">上课</td>
    </tr>
    <tr align="center" width="350">
        <td width="100">第九节</td>
        <td width="100">大四自习</td>
        <td width="100">大四自习</td>
        <td width="100">大四自习</td>
        <td width="100">上课</td>
        <td width="100">上课</td>
        <td width="100">上课</td>

    </tr>
    <tr align="center" width="350">
        <td width="100">第十节</td>
        <td width="100" colspan="5">大四自习</td>
        <td width="100">大四自习</td>
    </tr>
    <tr align="center" width="350">
        <td width="100" height="80"></td>
        <td width="100" colspan="7" style="font-size:14px;">

            每节课50分钟，中间10分钟休息;第一节课上午9点开始，晚上7点第九节课，午休俩小时，自习时间均留作业，大三同学有课冲突的话由老师补课，一周之内补课完毕。其余时间大三没课同学过来跟大四自习时间一起做作业。

        </td>

    </tr>




</table>