html基础-表格篇

最新推荐文章于 2024-03-20 20:59:51 发布

盼盼哦

最新推荐文章于 2024-03-20 20:59:51 发布

阅读量442

点赞数 1

分类专栏：前端开发文章标签： html

本文链接：https://blog.csdn.net/invalid_oath/article/details/119872666

版权

前端开发专栏收录该内容

18 篇文章 1 订阅

订阅专栏

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>表格</title>
</head>
<body>
    <h3><center>前端技术划分标准 </center></h3>
    <!-- cellspacing表示单元格间隙 
        align表示对齐方式
        border表示
    -->
    <table border="1" cellspacing="0">
        <col width="100px">
        <col width="100px">
        <col width="100px">
        <col width="100px">
        <col width="100px">
        <tr align="center">
            <td></td>
            <td>初级</td>
            <td>中级</td>
            <td>高级</td>
            <td>专家</td>
        </tr>
        <tr align="center">
            <td>标准</td>
            <td>被产品怼的说不出话</td>
            <td>跟产品怼的不相上下</td>
            <td>怼的产品没话说</td>
            <td>直接将其怼辞职</td>
        </tr>
        <tr align="center">
            <td>用户A</td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr align="center">
            <td>用户B</td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr align="center">
            <td>用户C</td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </table>
</body>
</html>

实现效果：
在这里插入图片描述
解释：

<table></table>标签: 用于定义一个html表格，包括一个或多个 <tr>、<th> 以及 <td> 元素。其属性cellspacing 表示单元格间隙，align 规定表格相对周围元素的对齐方式，border 规定表格单元是否拥有边框，但是在 HTML5 中，仅支持 “border” 属性，并且只允许使用值 “1” 或 “”。
<tr></tr>标签：用于定义 HTML 表格中的行，一个 <tr> 元素包含一个或多个 <th> 或 <td> 元素。其属性align 定义表格行的内容对齐方式。
<td></td>标签：用于定义 HTML 表格中的标准单元格。
<th></th>标签：用于定义 HTML 表格中的表头单元格。可视为文本内容通常呈现为粗体并且居中的<td> 标签。
<col>标签：没有结束标签，用于定义表格内的每一列的列属性。通过使用 <col> 标签，可以向整个列应用样式，而不需要重复为每个单元格或每一行设置样式。
<colgroup></colgroup>标签：用于对表格中的列进行组合，以便对其进行格式化。比如个人简历的代码可以进行替换（span属性：规定列组应该横跨的列数）：

2. 个人简历制作

<!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></title>
</head>

<body>
    <!-- colspan规定单元格可横跨的列数。 	
        rowspan设置单元格可纵跨的行数。作为td标签的属性 
        th标签=加粗并水平居中的td标签-->
    <table border="1px" cellspacing="0">
        <col width="100px">
        <col width="100px">
        <col width="100px">
        <col width="100px">
        <col width="100px">
        <col width="100px">
        <col width="200px">
        <tr align="center" height="60px">
            <th colspan="7">个人简历</th>
        </tr>
        <tr align="center" height="60px">
            <td>姓名</td>
            <td></td>
            <td>性别</td>
            <td></td>
            <td>年龄</td>
            <td></td>
            <td rowspan="4">照片</td>
        </tr>
        <tr align="center" height="60px">
            <td>学历</td>
            <td></td>
            <td>籍贯</td>
            
            <td  colspan="3"></td>
         
        </tr>
        <tr align="center" height="60px">
            <td>电话</td>
            <td></td>
            <td>政治面貌</td>
            
            <td colspan="3"></td>
           
        </tr>
        <tr align="center" height="60px">
            <td>毕业院校</td>
            
            <td colspan="5"></td>
        
        </tr>
        <tr align="center" height="60px">
            <td>求职意向</td>
            <td  colspan="6"></td>
        </tr>
    </table>
</body>

</html>

实现效果：
在这里插入图片描述 说明：

在上述的基础表格上用到了某个单元格横跨几行几列的属性。单元格标签<td></td>或者<th></th>的属性colspan：规定单元格可横跨的列数，rowspan：设置单元格可纵跨的行数。

额外补充：
按照W3C的标准写法，table严格要写成以下形式：
在这里插入图片描述
<tbody></tbody>是最重要的，我们在上面写的tr，td标签其实都在<tbody></tbody>里面，只是在渲染的时候浏览器会自动帮我们生成这个标签，以后写主体内容的时候，建议先将<tbody></tbody>标签加上，再将表格的主体内容填写进去。

盼盼哦

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
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"> <titl
复制链接

扫一扫