表格元素及相关样式

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. SPOJ 1812 Longest Common Substring II（后缀自动机）（LCS2）

    A string is finite sequence of characters over a non-empty finite set Σ. In this problem, Σ is the s ...

  2. lintcode-92-背包问题

    92-背包问题 在n个物品中挑选若干物品装入背包,最多能装多满?假设背包的大小为m,每个物品的大小为A[i] 注意事项 你不可以将物品进行切割. 样例 如果有4个物品[2, 3, 5, 7] 如果背包 ...

  3. 关于配置tomcat多版本同eclipse的配置问题

    最近很多同学都在反应tomcat和eclipse关联的问题,其他问题网上搜索下大多都有结果,有比较疑难杂症的,下面贴出: 有的同学之前配置过tomcat6的版本或者在此之前做过配置,现在配置tomca ...

  4. A - 移动的骑士

    A - 移动的骑士 Time Limit: 1000/1000MS (C++/Others) Memory Limit: 65536/65536KB (C++/Others) Problem Desc ...

  5. 传统IT七大职业的云计算转型之路

    毫无疑问,对于那些传统IT技术--企业架构师.系统管理者.测试验收工程师或者网络工程师等开发人员骑身到云计算行业不仅是大势所趋,也能为其带来工作的保证,薪酬也更加丰厚. 如今,企业上云已经成为不可阻挡 ...

  6. elementUI的导航栏怎么根据路由默认选中相关项

    1. <el-menu :default-active="this.$route.path.substr(1)" class="left-nav"> ...

  7. 【bzoj4152】[AMPPZ2014]The Captain 堆优化Dijkstra

    题目描述 给定平面上的n个点,定义(x1,y1)到(x2,y2)的费用为min(|x1-x2|,|y1-y2|),求从1号点走到n号点的最小费用. 输入 第一行包含一个正整数n(2<=n< ...

  8. java 使用ByteArrayOutputStream和ByteArrayInputStream实现深拷贝

    首先介绍Java中的浅拷贝(浅克隆)和深拷贝(深克隆)的基本概念: 浅拷贝: 被复制对象的所有变量都含有与原来的对象相同的值,而所有的对其他对象的引用仍然指向原来的对象.浅复制仅仅复制所考虑的对象,而 ...

  9. [洛谷P1536]村村通

    题意:多组数据,当n为0时结束,每组数据表示有n个村子,m条路,求还需要建多少条路,使得所有的村子联通题解:用并查集求出有多少个联通块,然后求解 C++ Code: #include<cstdi ...

  10. [Leetcode] subsets ii 求数组所有的子集

    Given a collection of integers that might contain duplicates, S, return all possible subsets. Note: ...