table标签、表格的跨行跨列、ifarme标签

table标签

需求:

制作一个带表头的三行山列的表格,并显示边框;修改表格的宽度、高度、表格的对齐方式、单元格间距。

<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <title>表格标签</title>
</head>
<body>
<!--table标签是表格标签
        border设置表格标签
        width设置表格宽度
        height设置表格高度
        align:设置表格相对于页面的对齐方式
        cellspacing:设置单元格间距

    tr:行标签
    th:表头标签
    td:单元格标签
    b :加粗标签
        align:设置单元格文本对齐方式
-->

<table align="center" border="1" width="200" height="300" cellspacing="2">
    <tr>
        <td align="center"><b>1</b></td>
        <td align="center"><b>2</b></td>
        <td align="center"><b>3</b></td>
    </tr>
    <tr>
        <th>4</th>
        <th>5</th>
        <th>6</th>
    </tr>
    <tr>
        <td>7</td>
        <td>8</td>
        <td>9</td>
    </tr>

</table>

</body>
</html>

 表格的跨行跨列

需求:

新建一个五行五列的表格,第一行第一列的单元格要跨两列,第二行第一列的单元格跨两行,第三行第四列的单元格跨两行两列        

新建五行五列的表格:

 将其按照需求进行修改:

<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <title>表格的跨行跨列</title>
</head>
<body>
<!--
    colspan属性:设置跨列
    rowspan属性:设置跨行
-->

<table width="300" height="300" cellspacing="1" border="1">
    <tr>
        <td colspan="2">1.1</td>

        <td>1.3</td>
        <td>1.4</td>
        <td>1.5</td>
    </tr>
    <tr>
        <td rowspan="2">2.1</td>
        <td>2.2</td>
        <td>2.3</td>
        <td>2.4</td>
        <td>2.5</td>
    </tr>
    <tr>
        <td>3.2</td>
        <td>3.3</td>
        <td>3.4</td>
        <td>3.5</td>
    </tr>
    <tr>
        <td rowspan="2" colspan="2">4.1</td>
        <td>4.2</td>
        <td>4.3</td>
        <td>4.4</td>
    </tr>
    <tr>
        <td>5.1</td>
        <td>5.2</td>
        <td>5.3</td>

    </tr>
</table>

</body>
</html>

 ifarme标签

基本介绍:

ifarme标签它可以在一个html页面上,打开一个小窗口去加载一个单独的页面

<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <title>ifarme标签</title>
</head>
<body>
<!--ifarme标签可以在页面上开辟新的显示独立的页面-->
<!--
    ifarme标签和a标签组合使用的步骤:
    1.ifarme标签中使用name属性定义一个名称
    2.在a标签的target属性上设置ifarme的name的属性值
-->

    第一个页面:
   <!-- <a href="../IMG/feiji.png">标签语法.html</a>>-->
    <iframe src="../IMG/feiji.png" width="200" height="300" name="lable"></iframe>
    <br>
    <ul>
        <li> <a href="列表.html" target="lable">列表标签</a> </li>
        <li> <a href="fontLable.html" target="lable">font标签</a> </li>
        <li> <a href="imgLable.html" target="lable">img标签</a> </li>
    </ul>
</body>
</html>

 点击列表标签:

 点击font标签:

 点击img标签:

  • 0
    点赞
  • 1
    收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:游动-白 设计师:我叫白小胖 返回首页
评论

打赏作者

cd:Lemon

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值