一，效果图。

二，代码。

<!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. 依赖注入[8]: .NET Core DI框架[服务消费]

    包含服务注册信息的IServiceCollection对象最终被用来创建作为DI容器的IServiceProvider对象.当需要消费某个服务实例的时候,我们只需要指定服务类型调用IServicePr ...

  2. 安卓开发学习笔记（五）：史上最简单且华丽地实现Android Stutio当中Webview控件https/http协议的方法

    一.我们先在XML当中自定义一个webview(Second_layout.xml) 代码如下: <?xml version="1.0" encoding="utf ...

  3. vue项目实践-添加axios封装api请求

    安装 axios npm install axios --save 创建实例 (utils/fetch.js) axios 默认提交格式为:application/json 可使用 qs 模块(需要安 ...

  4. 使用MUI的日期控件引起的探索——HTML5 input类型date属性

    我写移动端的页面会用到MUI这个框架,个人觉得挺好用的,有很多实用的UI组件.当然坑还是有的,http://dev.dcloud.net.cn/mui/ui/ MUI官网,有兴趣的小伙伴可以看看 虽然 ...

  5. 如何看待Google欲回归中国事件

    最近一条新闻刷爆了朋友圈: 8 月 6 日,<人民日报>在它位于 Facebook.Twitter 社交媒体平台的官方账号上发布了一篇标题为<Stability prerequisi ...

  6. 设置radio选中

    选中: $('.viewradio:input[name="istop"][value="' + getSelected().istop + '"]').pro ...

  7. C# 使用 HttpClient 调用 WebService 提示 NoSOAPAction

    问题 在自行构造 HttpClient 请求 SOAP 接口之后,返回 500 错误,并且提示 NoSOAPAction 信息. 原因 造成这个问题的主要原因是因为缺少了 SOAPAction 标头, ...

  8. 【Spark篇】---SparkStreaming+Kafka的两种模式receiver模式和Direct模式

    一.前述 SparkStreamin是流式问题的解决的代表,一般结合kafka使用,所以本文着重讲解sparkStreaming+kafka两种模式. 二.具体 1.Receiver模式    原理图 ...

  9. BBS论坛（三十三）

    33.celery实现邮件异步发送 (1)task.py pip install celery redis from celery import Celery from flask import Fl ...

  10. javascript ES6 新特性之 let

    let的作用是声明变量,和var差不多. let是ES6提出的,在了解let之前,最好先熟悉var的原理. JavaScript有一个机制叫“预解析”,也可以叫“提升(Hoisting)机制”.很多刚 ...