HTML <Tabel>简单使用

最新推荐文章于 2024-03-18 18:50:29 发布
最新推荐文章于 2024-03-18 18:50:29 发布
阅读量670 收藏
点赞数
分类专栏： 前端开发
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/CDUT100/article/details/73863808
版权

HTML  <table>简单使用，效果如下：


贴上代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta content="width=device_width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport"/>
    <title>Title</title>
    <link rel="stylesheet" href="css/searchTalentDetails.css"/>

    <style>
        table {
            border-collapse:collapse;
        }

        td {
            height:25px;
            border:1px solid #e3e3e3;
            padding: 8px;
        }

        .td_left{
            border-right-style: none;
            font-size: 14px;
            color: #999999
        }

        .td_right{
            border-left-style:none;
            font-size: 16px;
            text-align: right;
            color: #333333
        }

        .td_title_merge{
            font-size: 14px;
            color: #999999;
            background: #EBEBEB;
        }

        .td_merge_left{
            border-right-style: none;
            font-size: 14px;
            color: #999999
        }

        .td_merge_right{
            border-left-style:none;
            text-align: right;
            font-size: 16px;
            color: #333333
        }
    </style>
</head>

<body>
    <div>
        <span id="tipTitle">Hello world</span>

        <div id="tableBaseInfoStyle">
            <table style="table-layout:fixed;" width="100%" cellpadding="0" cellspacing="0" border="1">
                <!--Base Info-->
                <tr>
                    <td class="td_title_merge" colspan="4">Base Info</td>
                </tr>
                <tr>
                    <td class="td_left"> </td>
                    <td class="td_right" id="td_1">--</td>
                    <td class="td_left"> </td>
                    <td class="td_right" id="td_2">--</td>
                </tr>
                <tr>
                    <td class="td_left"> </td>
                    <td class="td_right" id="td_3">--</td>
                    <td class="td_left"> </td>
                    <td class="td_right" id="td_4">--</td>
                </tr>
                <tr>
                    <td class="td_merge_left" colspan="2"> </td>
                    <td class="td_merge_right" colspan="2" id="td_6">--</td>
                </tr>
                <tr>
                    <td class="td_merge_left" colspan="2"> </td>
                    <td class="td_merge_right" colspan="2" id="td_7">--</td>
                </tr>

                <!--Detail Info-->
                <tr>
                    <td class="td_title_merge" colspan="4">Detail Info</td>
                </tr>
                <tr>
                    <td class="td_left"> </td>
                    <td class="td_right" id="td_8">--</td>
                    <td class="td_left"> </td>
                    <td class="td_right" id="td_9">--</td>
                </tr>
                <tr>
                    <td class="td_left"> </td>
                    <td class="td_right" id="td_10">--</td>
                    <td class="td_left"> </td>
                    <td class="td_right" id="td_11">--</td>
                </tr>
                <tr>
                    <td class="td_merge_left"  colspan="2"> </td>
                    <td class="td_merge_right" colspan="2" id="td_12">--</td>
                </tr>
                <tr>
                    <td class="td_merge_left"  colspan="2"> </td>
                    <td class="td_merge_right" colspan="2" id="td_13">--</td>
                </tr>
                <tr>
                    <td class="td_merge_left"  colspan="2"> </td>
                    <td class="td_merge_right" colspan="2" id="td_14">--</td>
                </tr>
            </table>
        </div>
    </div>
</body>
</html>



KirogiYi
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML ＜table＞ 标签
玄链教育
08-22 827
table> 标签定义 HTML 表格。简单的 HTML 表格由 table 元素以及一个或多个 tr、th 或 td 元素组成。tr 元素定义表格行，th 元素定义表头，td 元素定义表格单元。更复杂的 HTML 表格也可能包括 caption、col、colgroup、thead、tfoot 以及 tbody 元素。
Html中＜div＞＜/div＞标签和＜li＞＜/li＞标签的简单应用
ZLQiang_csdn的博客
06-04 4077
实现简单的鼠标的导航渐变和简单电器分类页面 我们知道<div></div>标签： <div> 元素是块级元素，它是可用于组合其他 HTML 元素的容器。 <div> 元素没有特定的含义。除此之外，由于它属于块级元素，浏览器会在其前后显示折行。 如果与 CSS 一同使用，<div> 元素可用于对大的内容块设置样式属性。 <div> 元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。使用 <table&g
HTML表格table
weixin_58139900的博客
09-15 2079
表格简介 表格由 table 标签来定义。每个表格均有若干行（由tr 标签定义），每行被分割为若干单元格（由 td 标签定义）。 类比：excel表格&网页中的表格 表格的作用 之前：web开发人员过去也常常使用表格来完成整个网页布局，结构嵌套复杂修改维护困难被DIV+CSS取代 现在：用于显示、展示数据,(能够简捷迅速地查找或呈现不同类型的数据及它们之间的关系) 注意：现在HTML 表格应该用于表格数据，而不是来实现网页布局 表格基本标签 ..
HTML table
softuse的博客
01-08 520
table              这是一个table                                                     在表头                                      基本情况                一                二                    三
table的相关用法
qq_39576250的博客
08-10 2232
1.cellspacing 用于设置表格内部每个单元格之间的间距 2.表格内文字与边框间距cellpadding 3.表格背景颜色 bgcolor 4.表格背景图像 background=”背景图像地址” 5.单个单元格也可以设置自己的属性（如高度，背景颜色，边框颜色等），并且可对单个单元格的垂直和水平对齐进行操作 6.水平跨度colspan=”跨越的列数” 7.垂直跨度rowspan...
HTML基础————table标签
憨憨的博客
05-07 1万+
html——table
table的基本用法
马拉松PB
09-11 1485
二维表格即对行、列的操作。分为三步走：一是初始行、列；二是创建单元格；三是更新表格的定义
用< table>、< tr>、< td>表格标签编写课程表
weixin_45943199的博客
04-10 1766
表格编写课程表 接上篇文章，利用表格标签，设置属性，调节部分代码内容，粗略编写课程表。 下面展示一些 内联代码片。 <!doctype html> <html> <head> <meta charset="utf-8"> <title>课程表</title> <style> table{table-layou...
html页面的th标签合并,<Table> <tr> <th> <td> html表格标签
weixin_35146639的博客
06-07 2091
Table tr th td html表格标签教程—— html table tr td�?strong>html table tr th表格布局标签教程�?/p>学习DIV CSS回头再来学习Table表格标签组合就比较容易。再借助DW软件布局TABLE表格更加方便得心应手�?/p>一、html表格语法1、基本table tr td结构代码内容1.1内容1.2内容2.1内容2....
＜table＞ | HTML表格标签的定义与用法
weixin_44111587的博客
06-03 1696
定义与用法 <table> 标签定义 HTML 表格 一个 HTML 表格包括 <table> 元素，一个或多个<tr>、<th>以及<td>元素。 <tr> 元素定义表格行，<th> 元素定义表头，<td> 元素定义表格单元。 更复杂的 HTML 表格也可能包括 <caption>、<col>、<colgroup>、<thea...
tabel使用总结
weixin_30784945的博客
08-22 407
对日常使用到的tabel做下记录： <table cellspacing="0"><!--单元格间距为零 默认为2 border默认为 0--> <tr> <th colspan="4"></th><!--横跨4列单元格--> </t...
HTML系列之表格标签
老__L的博客
10-25 7377
本文主要介绍caption、col、colgroup、table、tbody、td、tfoot、th、thead、tr标签。 table 开始标签和结束标签不能省略；表格中由行中的单元格组成；表格中没有列元素，列的个数取决于行的单元格个数；caption 开始标签和结束标签都不能省略；当 table 标签是 caption 的父元素，caption 是 figure 元素的唯一后代的时候，
HTML表格（HTML 表格的使用，收藏这一篇就够了）
最新发布
u013179804的博客
03-18 1万+
你好，我是云桃桃。一个希望帮助更多朋友快速入门 WEB 前端的程序媛。今天聊聊 table。HTML元素用于创建表格，它是一种将数据按行和列组织排列的结构，用于在网页中呈现复杂的数据集。HTML 表格具有以下 2 种主要用途：1、最常见的用途是以表格形式展示数据，如产品价格、学生成绩、电影时间表等。表格可以清晰地展示数据的结构和关系。2、表格可以用于创建网页表单，通过在表格单元格中放置表单控件（如文本框、复选框、下拉菜单等），用户可以方便地输入数据。
<table>
立业的博客
12-14 518
■ 定义 <table>为表格标签，用来定义网页中的表格 ■ 使用说明 表格主要用于显示，展示数据，因为它可以让数据显示的非常的规整，使其可读性好 表格不是用来布局页面的，是用来展示数据的 ■ 示例 <table align="center" border="1" cellpadding="1" cellspacing="0" width="100" height="50...
Table 标签详解
热门推荐
_
02-11 3万+
<table>在HTML 中定义了表格布局。说到 table 标签，我们可以想到的大致有以下几个元素：<tr>、<th>、<td>、<thead>、<tbody>、<tfoot>接下来，我们看看每个元素有什么用，使用后会有怎样的效果。 table 的基本使用 1.<table> <!DOCTYPE html> <html><head><meta charset=".
【HTML】如何使用html制作一个简易的表格？
萌萌白白的博客
02-16 1万+
如何使用html制作一个简易的表格
HTML标签之表格和表单元素
知识点沉淀包括不限于前端
01-20 1220
HTML标签之表格和表单元素 1.表格标签 表格由<table>标签来定义； 每个表格均有若干行（由 <tr> 标签定义） 每行被分割为若干单元格（由 <td> 标签定义） 字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等 表格Table HTML表格表头: 表格的表头使用标签进行定义；大多数浏览器会把表头显示为粗体居中的文本。 HTML带有标题的表格: 表格的标题用captio
html表格（table）
weixin_46191548的博客
01-26 8381
表格标签： table：是整个表格的框架。 tr：单元行。 td：单元格。 table，tr，td三者的关系：td<tr<table，这里没有列的概念。 th：表头，如果有需要的话，表格的第一行替代所有的td。 caption：表格的标题，写在table之中，tr之前。 合并单元格： rowspan：垂直合并（跨列），占用下一行的一个单元格 colspan：水平合并（跨列），在本行自身...
HTML表格标签(table)
weixin_45321331的博客
11-22 2014
table标签简介: tabale标签是表格标签，html中较为常用的标签之一，主要用来制作表格，完成一些对比和统计工作 table具体使用:创建一个表格tr、td、th标签的作用:tr标签:td标签:th标签: 创建一个表格 <table class="container" id="xs"> <tr> <th>姓名</th> <th>年龄</th> .
HTML表格入门教程：学习<table>, <tr>, <td>标记
在创建HTML表格时，务必注意这三个基本元素——`<table>`、`<tr>`和`<td>`，它们必须正确地配对使用。缺失任何一个，都将导致表格无法正常显示。 此外，HTML（HyperText Markup Language）是用于创建网页的标准标记...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值