简单的表单

最新推荐文章于 2018-12-13 15:15:33 发布
最新推荐文章于 2018-12-13 15:15:33 发布
阅读量181 收藏
点赞数
分类专栏： html css 文章标签： html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jing522627463/article/details/81910313
版权
html 同时被 2 个专栏收录
1 篇文章 0 订阅
订阅专栏
css
1 篇文章 0 订阅
订阅专栏

简单Table样式，效果图：

<html>
<head>
    <style type="text/css">
        body {margin: 0;font-family:Helvetica, Georgia, Arial, sans-serif, 宋体;font-size:13px;}
        table {
          max-width: 100%;
          background-color: transparent;
          border-collapse: collapse;
          border-spacing: 0;
        }
        .table {
          width: 100%;
          margin-bottom: 20px;
          background-color: #ffffff;
        }
        .table-striped tbody>tr:nth-child(odd)>td,
        .table-striped tbody>tr:nth-child(odd)>th{background-color:#F5F5F5;}
        .table-striped tbody>tr:nth-child(odd)>td, 
        .table-striped tbody>tr:nth-child(odd)>th
        {
            background-color: #f9f9f9;
        }
        .table th,
        .table td {
          padding: 8px;
          line-height: 20px;
          text-align: left;
          vertical-align: top;
          border-top: 1px solid #dddddd;
        }

        .table th {
          font-weight: bold;
          white-space:nowrap;background-color:#f5f5f5;        background-image:-moz-linear-gradient(top,#ffffff,#f5f5f5);
          background-image:-ms-linear-gradient(top,#ffffff,#f5f5f5);
          background-image:-webkit-gradient(linear, 0 0, 0 100%, from(#FAFAF9), to(#f5f5f5));
          background-image:-webkit-linear-gradient(top,#ffffff,#f5f5f5);           background-image:-o-linear-gradient(top,#ffffff,#f5f5f5);
          background-image:linear-gradient(top,#ffffff,#f5f5f5);
          background-repeat:repeat-x;
        }
        .table thead th {
          vertical-align: bottom;
        }
        .table-bordered {
            border: 1px solid #ddd;
            border-collapse: separate;
            *
            border-collapse: collapse;
            border-left: 0;
            -webkit-border-radius: 4px;
            -moz-border-radius: 4px;
            border-radius: 4px;
        }
        .table-bordered th,
        .table-bordered td {
            border-left: 1px solid #dddddd;
        }
    </style>
</head>
<body>
    <table class="table table-striped table-bordered ">
        <thead>
            <tr>
                <th>序号</th>
                <th>课程名称</th>
                <th>申报单位</th>
                <th>课程负责人</th>
                <th>申请课程类别</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>宏观经济1</td>
                <td>经济学系1</td>
                <td>负责人1</td>
                <td>课程类别1</td>
            </tr>
            <tr>
                <td>2</td>
                <td>宏观经济2</td>
                <td>经济学系2</td>
                <td>负责人2</td>
                <td>课程类别2</td>
            </tr>
            <tr>
                <td>3</td>
                <td>宏观经济3</td>
                <td>经济学系3</td>
                <td>负责人3</td>
                <td>课程类别3</td>
            </tr>
            <tr>
                <td>4</td>
                <td>宏观经济4</td>
                <td>经济学系4</td>
                <td>负责人4</td>
                <td>课程类别4</td>
            </tr>
            <tr>
                <td>5</td>
                <td>宏观经济5</td>
                <td>经济学系5</td>
                <td>负责人5</td>
                <td>课程类别5</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

 

一葉知鞦
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【HTML】HTML实现简单表单（不含验证）
A Lucky Boy的博客
02-19 4774
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>这是.
一个简单的form表单登录界面
热门推荐
cxzlp0521的博客
09-21 4万+
1.表单展示 2.HTML代码 &lt;body&gt; &lt;div class="main"&gt; &lt;div class="title"&gt; &lt;span&gt;密码登录&lt;/span&gt; &lt;/div&gt; &lt;div class="title-msg"
简单的form表单
m_mt35的博客
10-24 1920
表单样式             * {             font-size: 12px;             margin: 0;             padding: 0;         }         input {             width: 320px;             height: 24px;          
制作简单的表单
lirongliyun的博客
03-15 1244
&lt;body&gt; &lt;h1 align="center"&gt;注册信息&lt;/h1&gt; &lt;hr color="blue"/&gt;  &lt;!--文本框设置value时，value的值会显示在文本框内--&gt; &lt;form&gt; &lt;table width="300px" align=&quo
简单页面表单
蓦然回首
09-04 672
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html>
form_php简单表单验证页面_
10-03
本项目名为“form_php简单表单验证页面”，显然它是一个面向初学者的实例，旨在教授如何使用PHP进行基本的表单数据验证。 在Web应用中，表单验证是必不可少的一环，它用于确保用户提交的数据符合预期的格式和规则，...
Bootstrap简单表单显示学习笔记
09-01
本文将深入探讨Bootstrap中关于简单表单显示的相关知识点，包括基本表单结构、内联表单以及样式调整。 首先，我们来看基本的表单结构。Bootstrap中的表单设计注重易用性和美观性。创建一个基本的Bootstrap表单，你...
简单的form表单模板
最新发布
01-16
本文将深入探讨“简单的form表单模板”及其相关知识点。 首先，我们需要了解HTML中的`<form>`标签。它是创建表单的基础，用于定义用户输入数据的区域。例如： ```html <!-- 表单内容 --> ``` 在这个例子中，`...
JS简单表单验证功能完整示例
10-15
主要介绍了JS简单表单验证功能,结合完整实例形式分析了JavaScript表单验证相关的字符串判断、正则验证、计算等相关操作技巧,需要的朋友可以参考下
简单表单校验
08-04
校验表单，支持远程校验
自己比较满意的Form表单样式
03-01
写了好多表单样式 ，这个表单样式是我比较满意的Form表单样式
做一个简单的HTML表单讲解吧
Tcontinuous的博客
05-09 5556
项目八表单............................................................................................................. 1学习目标：..................................................................................
Html简易表单制作
昝志立的博客
09-12 6157
（以百度注册表单为例）简易表单制作
6款漂亮HTML CSS样式用户留言表单
夜魅
08-25 3万+
首先我们要在网页中加上常用的几个标签文本，比如姓名，电子邮件，内容以及提交按钮，然后我们针对这些字段文本增加和修改样式就可以。 form action="" method="post" class="STYLE-NAME"> h1>Contact Form span>Please fill all the texts in the fields./span> /h1>
php写一个简易的登录表单
qq_35881389的博客
11-11 1430
一个简易的登录表单
一个写的挺干净的form表单验证，简洁
baixiaoshi的专栏
07-01 1145
/* 输入框检测js代码 用法： */ var FormValid = { valid : function( obj ) { var elements = obj.elements; var length = elements.length; for( var i=0;i<length;i++ ) if( valid = elements[ i ].getAttr
表单样式简单设计
weixin_30398227的博客
12-16 72
　　虽然作为后端程序员,简单的CSS样式还是要会滴,备份下 1.直接贴代码吧： @{ ViewBag.Title = "Index"; Layout = null; } <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script> <style type="tex...
html简单的表单
八点二十四分
12-13 263
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt; &lt;title&gt;&lt;/title&
vue生成一个简单表单
03-02
很高兴能够与你谈话。我可以回答你问题有关Vue生成一个简单表单的问题。Vue提供了一系列可以用于生成表单的组件，比如v-text-field、v-select、v-checkbox等，通过这些组件可以快速构建出一个简单的表单。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值