html-优秀学生信息表格

优秀学生信息表格

如何用html实现下图所示的优秀学生信息表:

首先,观察该表的表格的结构标签:
1、表标题:优秀学生信息表格,用caption
2、表头单元格:年纪,姓名,学号,班级,加粗表示,用 th
3、高三年级跨行合并,rowspan
4、班级这一列,表宽度大于其他三列,width
5、评语跨列合并,colspan

思路:首先搭建表的整体结构table确定表的范围:
对于表头thead确定范围,接着tr确定行,td或者th确定表头单元格(td确定表头,要用strong或b标签将文字加粗)
对于表主体,用tbody确定,tr确定行,td确定单元格
对于表尾,用tfoot确定范围,tr确定行,td确定单元格
然后细化内容
1、表格之间的线条显示,在table标签里添加border属性,比如border="1"
2、跨行跨列合并,跨行合并rowspan='数字‘,跨列合并colspan=’数字'

主体部分高一的跨2行合并高一 ,添加下一行数据时不用再重复添加高一,否则会多出来一列,同理跨列合并评语,也不需要再添加其他内容。

html-优秀学生信息表格_第1张图片


DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
head>
<body>
    <table border="1">
        <caption>优秀学生信息表caption>
        
        <thead>
            <tr>
                <th >年级th>
                <th>姓名th>
                <th>学号th>
                <th>班级th>
            tr>    
        thead>
        
        <tbody>
            <tr>
                <td rowspan="2" >高一td>
                <td height="100" >张三td>
                <td height="100" >110td>
                <td width="100">三年二班td>
            tr>        
            <tr>
                  
                
                <td height="100">赵四td>
                <td>120td>
                <td>三年三班td>
            tr>
        tbody>
        
        <tfoot>
            <tr>
                <td>评语td>
                <td colspan="3">你们都很优秀啦td>
            tr>
        tfoot>

    table>

body>
html>

结果展示:
html-优秀学生信息表格_第2张图片

你可能感兴趣的:(HTML学习笔记,html,css,前端,visual,studio,code,vscode)