表格练习

表格练习:

<table></table>:表体

<tr></tr>:行

<td<></td>:列

colspan=3:占三列

rowpan=2:占两行

border:边框大小

代码效果:



<html>
<head>
<meta charset="utf-8">
<title>表格作业</title>
</head>

<body>
<table  border="1px" align="center">
        <tr>
           <td colspan="3">学习成绩</td>

        </tr>
        <tr>
            <td rowspan="2">张三</td>
            <td>语文</td>
            <td>98</td>
        </tr>
        <tr>
             <td>数学</td>
             <td>95</td>
        </tr>
         <tr>
            <td rowspan="2">李四</td>
            <td>语文</td>
            <td>88</td>
        </tr>
        <tr>
             <td>数学</td>
             <td>91</td>
        </tr>
</table>
</body>
</html>


HTML 表格是一种用于组织和展示数据的方式,它通过行(row)和列(column)的形式将信息结构化地呈现给用户。下面是一个简单的 HTML 表格练习的介绍: ### 基本语法 HTML 表格的基本元素包括 `<table>`、`<tr>` 和 `<td>` 标签: 1. **`<table>`**:定义一个表格2. **`<tr>`**:定义表格中的每一行。 3. **`<td>`** 或者 **`<th>`**:分别表示单元格内容和表头。 #### 示例代码 ```html <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>HTML 表格示例</title> <style> table { border-collapse: collapse; width: 50%; } th, td { border: 1px solid black; padding: 8px; text-align: center; } th { background-color: #f2f2f2; } </style> </head> <body> <h2>学生成绩表</h2> <table> <thead> <tr> <th>姓名</th> <th>科目</th> <th>分数</th> </tr> </thead> <tbody> <tr> <td>张三</td> <td>数学</td> <td>90</td> </tr> <tr> <td>李四</td> <td>语文</td> <td>85</td> </tr> <tr> <td>王五</td> <td>英语</td> <td>88</td> </tr> </tbody> </table> </body> </html> ``` 上面这个例子创建了一个包含学生名字、学科以及相应得分的成绩表,并利用了 CSS 来美化表格样式。 ### 练习建议 你可以尝试完成以下几个任务来巩固对 HTML 表格的理解: 1. 创建一个更大的表格并添加更多字段如“年龄”、“性别”等; 2. 使用跨行列功能(`colspan`, `rowspan`)设计更复杂的布局; 3. 实验不同样式的设置比如背景颜色渐变效果。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值