一，效果图。

二，代码。

<!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. Java作业五（2017-10-15）

    /*3-6.程序员;龚猛*/ 1 package zhenshu; import java.util.Scanner; public class text { public static void m ...

  2. 从零开始学深度学习mxnet教程：安装以及基本操作

    一.导言 本教程适合对人工智能有一定的了解的同学,特别是对实际使⽤深度学习感兴趣的⼤学⽣.⼯程师和研究⼈员.但本教程并不要求你有任何深度学习或者机器学习的背景知识,我们将从头开始解释每⼀个概念.虽然深 ...

  3. [Swift]LeetCode155. 最小栈 | Min Stack

    Design a stack that supports push, pop, top, and retrieving the minimum element in constant time. pu ...

  4. mac缺少librt问题记录

    在mac下编译一个程序的时候遇到错误 ld: library not found for -lrt librt.so主要是glibc对real-time部分的支持.所以一般含有#include< ...

  5. Centos7 防火墙 firewalld 实用操作

    一.前言 Centos7以上的发行版都试自带了firewalld防火墙的,firewalld去带了iptables防火墙.其原因是iptables的防火墙策略是交由内核层面的netfilter网络过滤 ...

  6. Android--SoundPool

    前言 在Android中播放音频文件经常会用到MediaPlayer,但是MediaPlayer存在一些不足的地方,如:资源占用量较高.加载延迟时间较长.不支持多个音频同时播放等.这些缺点决定了Med ...

  7. ASP.NET中共有哪几种类型的控件？其中，HTML控件、HTML服务器控件和WEB服务器控件之间有什么区别

    ASP.NET的控件包括WEB服务器控件.WEB用户控件.WEB自定义控件.HTML服务器控件和HTML控件.HTML控件.HTML服务器控件和WEB服务器控件之间的区别如下所示.q      HTM ...

  8. 版本管理工具Git（一）简要介绍

    版本管理工具不但可以备份而且还能记录版本,也就是同一个东西不同时期的状态同时可以跟踪追溯.版本管理工具由CVS.SVN.Git.GitHub. 最早的版本管理工具CVS,因为多人开发项目导致工作很难协 ...

  9. Spring Boot分布式系统实践【扩展1】shiro+redis实现session共享、simplesession反序列化失败的问题定位及反思改进

    前言 调试之前请先关闭Favicon配置 spring:     favicon:       enabled: false 不然会发现有2个请求(如果用nginx+ 浏览器调试的话) 序列化工具类[ ...

  10. 解决Springboot 的ajax跨域问题-动静分离

    @SpringBootApplication public class FsSysApiApp { public static void main(String[] args) { SpringApp ...