html标签-如何制作表格

本文介绍了HTML中创建表格的基本语法,包括table、tr和td标签的使用,以及相关属性如width、height、border等的设置。通过两个案例展示了如何构建具有不同功能的表格,例如课程表的布局和样式设定,帮助理解HTML表格在网页设计中的实际应用。
摘要由CSDN通过智能技术生成

表格标签

  • 表格标签:table
  • table中的行标签:tr
  • table中的列标签:td

table标签的属性

  • width:表格的宽度,值可以是具体的值,也可以是百分比

  • height:表格的高度,值可以是具体的值,也可以是百分比

  • border:表格的边框线的粗细

  • bgcolor:表格的背景色

  • align:设置表格的对齐方式,center表示居中,left表示居左,right表示居右

  • rulles=yes:表示合并边框线

  • cellpadding:设置单元格的边框线和内容之间的距离

  • cellspacing:设置单元与相邻的单元格的距离

tr标签的属性

  • bgcolor:设置这行的背景色

  • height:设置这行的高度

  • align:设置水平居中,center表示居中,left表示居左,right表示居右

  • valign:设置垂直居中,middle表示居中,top表示上,bottom表示下

td标签的属性

  • bgcolor:设置这列的背景色

  • height:设置这列的高度

  • align:设置水平居中,center表示居中,left表示居左,right表示居右

  • valign:设置垂直居中,middle表示居中,top表示上,bottom表示下

  • rowspan:上下合并单元格

  • colspan:左右合并单元格


案例1:创建一个三行五列的表格,设置边框为黑色线,1像素大小,实线 。


<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <table border="1px solid red" width=500 height=100 cellspacing="0" rules="yes" align="center">
        <tr align="center">
            <td>1-1</td>
            <td>1-2</td>
            <td>1-3</td>
            <td>1-4</td>
            <td>1-5</td>
        </tr>
        <tr align="center">
            <td>2-1</td> 
            <td>2-2</td> 
            <td>2-3</td> 
            <td>2-4</td> 
            <td>2-5</td>
        </tr>
        <tr align="center">
            <td>3-1</td>  
            <td>3-2</td> 
            <td>3-3</td> 
            <td>3-4</td> 
            <td>3-5</td>
        </tr>
    </table>
</body>
</html>

展示如下

案例2:根据图中的表格写出对应的代码

展示如下

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>

    <table border="1px red solid" align="center" rules="yes" cellspacing="0" cellpadding="0" width="1000" height=300>
        <!-- 第一行: 表头 -->                 //  ←这里为注释,不会展示出去
        <tr height=40>
            <td colspan="8" align="center" bgcolor="silver"> 课 程 表</td>
        </tr>

        <!-- 第二行: 周几 -->
        <tr align="center" height=40>
            <td width="150"></td>
            <td>周一</td>
            <td>周二</td>
            <td>周三</td>
            <td>周四</td>
            <td>周五</td>
            <td>周六</td>
            <td>周日</td>
        </tr>

        <!-- 第三行 -->
        <tr  align="center" height=40>
            <td rowspan="4" align="center">上午</td>
            <td>语文</td>
            <td>语文</td>
            <td>语文</td>
            <td>语文</td>
            <td>语文</td>
            <td>语文</td>
            <td>语文</td>
        </tr>

        <!-- 第四行 -->
        <tr align="center" height=40>
            <td>数学</td>
            <td>数学</td>
            <td>数学</td>
            <td>数学</td>
            <td>数学</td>
            <td>数学</td>
            <td>数学</td>
        </tr>


        <!-- 第五行 -->
        <tr align="center" height=40>
            <td>数学</td>
            <td>数学</td>
            <td>数学</td>
            <td>数学</td>
            <td>数学</td>
            <td>数学</td>
            <td>数学</td>
        </tr>


        <!-- 第六行 -->
        <tr align="center" height=40>
            <td>数学</td>
            <td>数学</td>
            <td>数学</td>
            <td>数学</td>
            <td>数学</td>
            <td>数学</td>
            <td>数学</td>
        </tr>

        <!-- 第七行 -->
        <tr align="center" height=40>
            <td>午休</td>
            <td colspan="7">11:30 ~ 13:30</td>
        </tr>


        <!-- 第八行 -->
        <tr  align="center" height=40>
            <td rowspan="4" align="center">下午</td>
            <td>语文</td>
            <td>语文</td>
            <td>语文</td>
            <td>语文</td>
            <td>语文</td>
            <td>语文</td>
            <td>语文</td>
        </tr>

        <!-- 第九行 -->
        <tr align="center" height=40>
            <td>数学</td>
            <td>数学</td>
            <td>数学</td>
            <td>数学</td>
            <td>数学</td>
            <td>数学</td>
            <td>数学</td>
        </tr>


        <!-- 第十行 -->
        <tr align="center" height=40>
            <td>数学</td>
            <td>数学</td>
            <td>数学</td>
            <td>数学</td>
            <td>数学</td>
            <td>数学</td>
            <td>数学</td>
        </tr>


        <!-- 第十一行 -->
        <tr align="center" height=40>
            <td>数学</td>
            <td>数学</td>
            <td>数学</td>
            <td>数学</td>
            <td>数学</td>
            <td>数学</td>
            <td>数学</td>
        </tr>

        <!-- 第十二行 -->
        <tr align="center" height=40>
            <td>晚餐</td>
            <td colspan="7">17:00 ~ 18:00</td>
        </tr>

        <!-- 第十三行 -->
        <tr  align="center" height=40>
            <td rowspan="2" align="center">晚自习</td>
            <td>晚自习</td>
            <td>晚自习</td>
            <td>晚自习</td>
            <td>晚自习</td>
            <td>晚自习</td>
            <td>晚自习</td>
            <td>晚自习</td>
        </tr>

        <!-- 第十四行 -->
        <tr align="center" height=40>
            <td>晚自习</td>
            <td>晚自习</td>
            <td>晚自习</td>
            <td>晚自习</td>
            <td>晚自习</td>
            <td>晚自习</td>
            <td>晚自习</td>
        </tr>

    </table>
</body>
</html>


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值