表格元素及相关样式

1、<table>标签：声明一个表格

2、<tr>标签：定义表格中的一行

3、<td>和<th>标签：定义一行中的一个单元格，td代表普通单元格，th表示表头单元格

表格相关样式属性

  • border-collapse 设置表格的边线合并，如：border-collapse:collapse;

示例：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        body,table,tr,th,td{

            padding: 0;

            margin: 0;

        }

        table,th,td{

            border: 1px solid orange; /*表格的外面加上边框*/

            border-collapse: collapse; /*合并表格中的边框*/

        }

        th{

            width: 60px;

        }

        td{

            text-align: center;

        }

    </style>

</head>

<body>

    <table>

        <tr>

            <th>ID</th>

            <th>姓名</th>

            <th>年龄</th>

            <th>性别</th>

        </tr>

        <tr>

            <td>1</td>

            <td>小明</td>

            <td>6</td>

            <td>男</td>

        </tr>

        <tr>

            <td>2</td>

            <td>小花</td>

            <td>8</td>

            <td>女</td>

        </tr>

        <tr>

            <td>3</td>

            <td>小志</td>

            <td>3</td>

            <td>男</td>

        </tr>

    </table>

</body>

</html>

html的表格的更多相关文章

  1. ASP.NET Aries 入门开发教程6：列表数据表格的格式化处理及行内编辑

    前言: 为了赶进度,周末也写文了! 前几篇讲完查询框和工具栏,这节讲表格数据相关的操作. 先看一下列表: 接下来我们有很多事情可以做. 1:格式化 - 键值的翻译 对于“启用”列,已经配置了格式化 # ...

  2. 03.LoT.UI 前后台通用框架分解系列之——多样的表格

    LOT.UI分解系列汇总:http://www.cnblogs.com/dunitian/p/4822808.html#lotui LoT.UI开源地址如下:https://github.com/du ...

  3. jQuery学习之路（6）- 简单的表格应用

    ▓▓▓▓▓▓ 大致介绍 在CSS技术之前,网页的布局基本都是依靠表格制作,当有了CSS之后,表格就被很多设计师所抛弃,但是表格也有他的用武之地,比如数据列表,下面以表格中常见的几个应用来加深对jQue ...

  4. 在Asp.Net中操作PDF – iTextSharp - 使用表格

    使用Asp.Net生成PDF最常用的元素应该是表格,表格可以帮助比如订单或者发票类型的文档更加格式化和美观.本篇文章并不会深入探讨表格,仅仅是提供一个使用iTextSharp生成表格的方法介绍 使用i ...

  5. DOM的小练习，两个表格之间数据的移动

    本次讲的是两个表格之间数据的移动,左边的表格移动到右边,并且左边表格移动内容消失. <head>   <meta http-equiv="Content-Type" ...

  6. JQuery实现表格的增加行和删除行

    利用JQuery实现datatables插件的增加和删除行操作 在学习过程中遇到了这个利用JQuery对表格行的增加和删除,特记录下来以供初学者参考. 下面是主要的代码: <meta http- ...

  7. jquery-treegrid树状表格的使用（.Net平台）

    上一篇介绍了DataTable,这一篇在DT的基础之上再使用jquery的一款插件:treegrid,官网地址:http://maxazan.github.io/jquery-treegrid/ 一. ...

  8. Python处理Excel表格

    同事小王今天说他有一个Excel表格,表格如下,一列是姓名,一列是电话号码,总共有大概2000行数据. 有的姓名占了一行,有的占了两行,还有一些占了三行的.如下图: 他问我可不可以全部统一成一行,而且 ...

  9. bootstrap表格

    Bootstrap 实例 - 边框表格 < 建立日期 2015-5-27 录入人员 test1 处理人员 test2 问题报障人   部门/城市公司   联系电话   问题类型   处理状态   ...

  10. SSRS 实用技巧 ---- 为表格添加展开/折叠操作（明细报表）

    相信很多人都会遇到这样的需求:当表格按照某几个列分组时,需要为组添加展开和折叠的操作. 最初展现表格的时候只展现最外层分组,然后点击展开后可以查看分组内的明细情况. 先来一张效果图,然后再看具体如何实 ...

随机推荐

  1. kill命令详解

    基础命令学习目录首页 原文链接:https://www.cnblogs.com/wangcp-2014/p/5146343.html 1．命令格式: kill[参数][进程号] 2．命令功能: 发送指 ...

  2. 望岳物业App开发过程记录

    望岳物业APP开发过程记录 ——杜冰青 1.小组讨论,决定模块功能. 2.开始做“社区活动”界面,完成主页面.分享界面.内容界面,但是分享功能暂时没有完成. 3.接着做“一键开门”界面,因为硬件设施跟 ...

  3. asp.net文件上传进度条研究

    文章:asp.net 文件上传进度条实现代码

  4. 团队作业4——第一次项目冲刺（Alpha版本)-第一篇

    第一次项目冲刺——第一阶段 今天我们在宿舍开了个会,每个人都斗志昂扬的.撸起袖子加油干! 分工讨论 团队成员 任务 郭达  完成博客随笔和leangoo 刘德培  设计好数据库 石浩洋  搭建好LAM ...

  5. A1

    It’s surprising what you can find at the end of your garden. Wild flowers... and even smaller yet, i ...

  6. 从零开始配置Jenkins（三）——用户权限管理

    背景 最近项目管理中需要对jenkins的权限进行区分和限定,就研究了一下下.顺道把用户和权限这块的内容分享给大家. 用户 要想创建用户,需要先设定允许用户注册. 在系统设置,Configure Gl ...

  7. 算法(4) Rotate Image

    题目:把一个N×N的矩阵旋转90° 思路:这个题目折腾了好长时间,确切地说是两个小时!这道题也反映出自己的逻辑比较混乱 这道题我到底卡在了哪里?自己已经在本子上画出了一个转移的关系 a[0][0] - ...

  8. Sql Server性能优化辅助指标SET STATISTICS TIME ON和SET STATISTICS IO ON

    1.前言 对于优化SQL语句或存储过程,以前主要是用如下语句来判断具体执行时间,但是SQL环境是复杂多变的,下面语句并不能精准判断性能是否提高:如果需要精确知道CPU.IO等信息,就无能为力了. ), ...

  9. spring笔记二

    DI—Dependency Injection,即“依赖注入”:组件之间依赖关系由容器在运行期决定,形象的说,即由容器动态的将某个依赖关系注入到组件之中.依赖注入的目的并非为软件系统带来更多功能,而是 ...

  10. 洛谷P4588 [TJOI2018]数学计算 【线段树】

    题目链接 洛谷P4588 题解 用线段树维护即可 #include<algorithm> #include<iostream> #include<cstring> ...