HTML表格与标签实战-CSDN博客

本文链接：https://blog.csdn.net/sss2113923/article/details/65941788

学习表格等标签的变化和运用，课后练习详情见末尾。

ol/ul

reversed 倒叙属性
type 属性序号类型
start属性指定列表的开始索引

a href 标签用来链接跳转的页面可以本地页面也可以非本地页面
+ title 显示鼠标悬浮时的文本

target 属性
blank 新开页打开
self 当前页打开
rel next/prev 下一个前一个

s 标签删除线
cite标签通常书画的引用
mark 标签高亮显示

pre 配合 code 标签

bdo 标签 dir 方向 rtl 从左到右

sup 上标文本 sub下标文本

转义符号

< 左尖括号
&copy 版权符号
&gt 右尖括号

表格 table标签
th 表格标题
tr 定义行
td 定义列

border 给表格添加边框内边框为1不变
border color 边框颜色
width height 表格的宽高
cellspacing border-cellapse :"cellapse" 单元格与单元阁间距
cellpadding 单元格与边框的距离
align 标签 center表格居中
bgcolor:背景颜色
background="../img.." 图片覆盖颜色

表格属性与行列属性冲突时，以行列属性为准就近优先

vlign=“top” 垂直方向对齐方式
td nowrap="nowrap"

caption 表格标题

colgroup 列组

课后作业： 3个表格的运用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格应用</title>
</head>
<body>
<table border="1" width="300px" height="200px" align="center" cellspacing="20px">
    <tr align="center">
        <td bgcolor="red">红</td>
        <td bgcolor="green">绿</td>
        <td bgcolor="blue">蓝</td>
    </tr>
    <tr align="center">
        <td bgcolor="yellow">黄</td>
        <td bgcolor="#8a2be2">紫</td>
        <td bgcolor="aqua">青</td>
    </tr>
</table>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<hr color="#ccff2b" />
<hr color="#ccff2b" />
<div align="center">
    <h2><u>特别休假申请单</u></h2>

    <p style="margin-right: 450px">申请日期： 年 月 日</p>
</div>
<table border="1" width="600px" height="350px" align="center" bordercolor="aqua" cellspacing="0.5px">
    <tr>
        <td colspan="2">所属单位</td>
        <td colspan="2">部 组 班</td>
        <td>职称</td>
        <td>111</td>
        <td colspan="2">姓名</td>
        <td colspan="2">111</td>
        <td>厂长</td>
    </tr>
    <tr>
        <td rowspan="2" colspan="2">期间</td>
        <td colspan="4">年 月 日</td>
        <td rowspan="2" colspan="4">天数</td>
        <td>1111</td>
    </tr>
    <tr>
        <td colspan="4">年 月 日</td>
        <td>主管</td>
    </tr>
    <tr>
        <td colspan="4">职务代理人</td>
        <td colspan="6">盖章</td>
        <td>111</td>
    </tr>
    <tr>
        <td colspan="2">到期日期</td>
        <td colspan="4">年 月 日</td>
        <td colspan="4">审核意见</td>
        <td>组长</td>
    </tr>
    <tr>
        <td colspan="4">全年特别休假数</td>
        <td colspan="2" align="right">天</td>
        <td colspan="2">111</td>
        <td colspan="2">111</td>
        <td>111</td>
    </tr>
    <tr>
        <td colspan="4">已请假天数</td>
        <td colspan="2" align="right">天</td>
        <td colspan="2">人事主任</td>
        <td colspan="2">人事经办</td>
        <td>组长</td>
    </tr>
    <tr>
        <td colspan="4">本次申请天数</td>
        <td colspan="2" align="right">天</td>
        <td rowspan="2" colspan="2">111</td>
        <td rowspan="2" colspan="2">111</td>
        <td rowspan="2">111</td>
    </tr>
    <tr>
        <td colspan="4">尚申请天数</td>
        <td colspan="2" align="right">天</td>
    </tr>
</table>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<hr color="#ccff2b" />
<hr color="#ccff2b" />
</body>
<table border="8" bordercolor="black"
       width="370px" height="180px"
       align="center" cellspacing="10px">
    <tr>
        <th colspan="2" align="center">出塞 王昌龄</th>
    </tr>
    <tr>
        <td rowspan="4" width="180px" height="150px">
            <img src="../img/111.jpg" alt="网速太慢啦" width="180px" height="150px"/>
        </td>
        <td>秦时明月汉时关，</td>
    </tr>
    <tr>
        <td>万里长征人未还。</td>
    </tr>
    <tr>
        <td>但使龙城飞将在，</td>
    </tr>
    <tr>
        <td>不教胡马度阴山。</td>
    </tr>
</table>
</html>

2017.3.19