一，效果图。

二，代码。

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>CSS Table表格</title>

    <style>

    table {

        border-collapse: collapse;

        width: 100%;

    }

    table,

    th,

    td {

        border: 1px solid green;

    }

    th {

        height: 50px;

        background-color: green;

        color: white;

    }

    td {

        text-align: right;

        height: 50px;

        vertical-align: bottom;

        padding: 15px;

    }

    </style>

</head>

<body>

    <table>

        <tr>

            <th>Firstname</th>

            <th>Lastname</th>

        </tr>

        <tr>

            <td>Peter</td>

            <td>Griffin</td>

        </tr>

        <tr>

            <td>Lois</td>

            <td>Griffin</td>

        </tr>

    </table>

</body>

</html>

参考资料:《菜鸟教程》

【代码笔记】Web-CSS-CSS Table(表格）的更多相关文章

  1. 初探css -11 Table表格

    CSS 表格 使用 CSS 可以使 HTML 表格更美观. Company Contact Country Alfreds Futterkiste Maria Anders Germany Bergl ...

  2. 纯css实现table表格固定列和表头,中间横向滚动的思路-附案例

    最近做的后台管理系统要处理大量的表格 原项目是采用的for循环加拼接字符串的方式实现;导致js代码一大堆;各种单引号和双引号的嵌套;让人头疼;遂引入vue.js;用v-for做模板渲染;工作量顿时减轻 ...

  3. css设置table表格tr分离

    table { border-collapse:separate; border-spacing:10px 50px; }

  4. CSS 设置TABLE 表格 边框

    /*table列表 合并边框设置*/ .tablelist { border-collapse:collapse; } /*table列表 设置边框宽度及颜色*/ .tablelist td { bo ...

  5. 【代码笔记】iOS-自动成表格的效果

    一,效果图. 二,工程图. 三,代码. RootViewController.h #import <UIKit/UIKit.h> #import "LabelOnBackImag ...

  6. [转]CSS如何设置html table表格边框样式

    原文地址:http://www.divcss5.com/wenji/w503.shtml 对table设置css样式边框,分为几种情况: 1.只对table设置边框 2.对td设置边框 3.对tabl ...

  7. Python学习笔记整理总结【web基础】【web/HTML/CSS/JavaScript/DOM/jQuery】

    一.HTML HTML是英文Hyper Text Mark-up Language(超文本标记语言)的缩写,他是一种制作万维网页面标准语言(标记).相当于定义统一的一套规则,大家都来遵守他,这样就可以 ...

  8. 利用CSS生成精美细线Table表格

    精美的表格是前端开发用到的一个组件,很多时候我们利用复杂的页面style代码,来生成这样的表格,造成了页面的修改性和可读性都非常差.这里推荐直接使用css来产生一个细线表格. 使用方法也很简单: 第一 ...

  9. java：HTML（table表格，ul列表）和CSS（导入.css文件，三种定义颜色方式，三种样式选择器，a标签属性顺序，）

    1.重点掌握: html: 1.form表单:input,checkbox,seelct,radio,button,submit 2.table表格:thead-->tr-->th;tbo ...

随机推荐

  1. Three.js学习笔记02

    1.改变相机的位置,让物体移动 通过下面的代码改变相机的位置: camera.position.x =camera.position.x +1; 将相机不断的沿着x轴移动1个单位,也就是相机向右移动. ...

  2. FCC（ES6写法） Exact Change

    设计一个收银程序 checkCashRegister() ,其把购买价格(price)作为第一个参数 , 付款金额 (cash)作为第二个参数, 和收银机中零钱 (cid) 作为第三个参数. cid  ...

  3. 移动端web开发的注意点大总结

    对于手机网站建设,总结了如下几点注意: 1. 安卓浏览器看背景图片,有些设备会模糊. 用同等比例的图片在PC机上很清楚,但是手机上很模糊,原因是什么呢? 经过研究,是devicePixelRatio作 ...

  4. Jenkins（Docker容器内）使用宿主机的docker命令

    1.Jenkins镜像 Docker容器内的Jenkins使用容器外宿主机的Docker(即DooD,还有另外的情况就是DioD),google一下有几种说法,但是都没试成功(试过一种就是修改宿主机/ ...

  5. js查重去重性能优化心得

    概述 今天产品反映有个5000条数据的页面的保存按钮很慢,查看代码看到是因为点击保存按钮之后,进行了查重操作,而查重操作是用2个for循环完成了,时间复杂度是O(n^2).没办法,只能想办法优化一下了 ...

  6. [Swift]LeetCode106. 从中序与后序遍历序列构造二叉树 | Construct Binary Tree from Inorder and Postorder Traversal

    Given inorder and postorder traversal of a tree, construct the binary tree. Note:You may assume that ...

  7. 配置vscode同步大神玺哥的配置

    1.应用商店下载settings  sync 2.三键 ctrl + shift + p   对话框中输入sync:点击重置 3.ctrl + shift + p  点击下载 4.然后会自动的调整到g ...

  8. SpringBoot环境搭建

    创建 maven 项目 , 选择的打包类型为 jar 类型 自己构建 SpringBoot 项目时 , 要继承 SpringBoot 的父项目 , 这里用的版本是 2.1.4 点击 Finish , ...

  9. python编译pyc工程--导包问题解决

    利用python 编译工程,生产pyc文件 pyc文件好处:是一种二进制机器码,并且隐藏了源文件代码,但是有和py文件一样的功能(可以理解为效果一样) 所以可以将代码隐藏,便于商业价值,保护代码隐私还 ...

  10. 又拍云 API 使用的那些小事

    又拍云提供了丰富的 API 调用,为了减少用户在初次接入时可能会遇到的坑”,本文将对又拍云常用的 API 使用方法做个简单的梳理,力求让业务接入变得更简单,更高效. 目前我们的 API 主要有四大类, ...