html基础学习（表格）（二）

最新推荐文章于 2023-06-20 23:11:25 发布

罗罗诺亚丶索隆

最新推荐文章于 2023-06-20 23:11:25 发布

阅读量95

点赞数

分类专栏：前端html css js学习文章标签： html

本文链接：https://blog.csdn.net/qq_36802214/article/details/107084064

版权

前端html css js学习专栏收录该内容

17 篇文章 0 订阅

订阅专栏

表格基本结构

表格其实就是很多的小单元格，而这些小单元格很有次序的排列着，它们有很多行，很多列。这些很多行列组成的东西，就叫表格，表格是<table>标签来定义的。而<table>标签中的行就是<tr>标签，而列就是<td>标签，必须先定义行才能定义列。因为html中，每一列是在一行当中的。

表格	描述
<table>	定义表格
<caption>	定义表格标题
<th>	定义表格的表头
<tr>	定义表格的行
<td>	定义表格的单元
<thead>	定义表格的页眉
<tbody>	定义表格的主体
<tfoot>	定义表格的页脚
<col>	定义表格的列属性

基本表格用法

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>企业员工通讯录</title>
</head>

<body>
    <table border="1" cellspacing="0" cellpadding="20" width="1000">
        <caption>企业员工通讯录</caption>
        <tr>
            <th>姓名</th>
            <th>电话</th>
            <th>电子邮箱</th>
            <th>职务</th>
        </tr>
        <tr align="center">
            <td>张三</td>
            <td>18278305487</td>
            <td>zhang@qq.com</td>
            <td>研发工程师</td>
        </tr>
        <tr align="center">
            <td>王二</td>
            <td rowspan="2">12356843687</td>
            <td>wang@qq.com</td>
            <td>研发经理</td>
        </tr>
        <tr align="center">
            <td>李四</td>
            <td>li@qq.com</td>
            <td>研发工程师</td>
        </tr>
        <tr align="center">
            <td colspan="2">李四</td>
            <td>li@qq.com</td>
            <td>研发工程师</td>
        </tr>
    </table>
</body>

</html>

效果如下图

表格属性

罗罗诺亚丶索隆

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html基础学习（表格）（二）

表格基本结构表格其实就是很多的小单元格，而这些小单元格很有次序的排列着，它们有很多行，很多列。这些很多行列组成的东西，就叫表格，表格是<table>标签来定义的。而<table>标签中的行就是<tr>标签，而列就是<td>标签，必须先定义行才能定义列。因为html中，每一列是在一行当中的。表格描述 <table> 定义表格 <caption> 定义表格标题 <th> 定义表格的表
复制链接

扫一扫