首页 > 其他分享 >条纹表格布局

条纹表格布局

时间:2023-03-17 20:12:00浏览次数:33  
标签:副标题 表格 本行 布局 标题 内容 条纹 class

<html>
    <head>
        <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">  
        <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
        <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    </head>
    <body>
        <h1>我是标题1 h1. <small>我是副标题1 h1</small></h1>
        <h2>我是标题2 h2. <small>我是副标题2 h2</small></h2>
        <h3>我是标题3 h3. <small>我是副标题3 h3</small></h3>
        <h4>我是标题4 h4. <small>我是副标题4 h4</small></h4>
        <h5>我是标题5 h5. <small>我是副标题5 h5</small></h5>
        <h6>我是标题6 h6. <small>我是副标题6 h6</small></h6>
        <p class = "lead">我的第六个标签&nbsp&nbsp&nbsph6</p>
        <small>本行内容是在标签内</small><br>
        <strong>本行内容是在标签内</strong><br>
        <em>本行内容是在标签内,并呈现为斜体</em><br>
        <p class="text-left">向左对齐文本</p>
        <p class="text-center">居中对齐文本</p>
        <p class="text-right">向右对齐文本</p>
        <p class="text-muted">本行内容是减弱的</p>
        <p class="text-primary">本行内容带有一个 primary class</p>
        <p class="text-success">本行内容带有一个 success class</p>
        <p class="text-info">本行内容带有一个 info class</p>
        <p class="text-warning">本行内容带有一个 warning class</p>
        <p class="text-danger">本行内容带有一个 danger class</p>
        <br/><br/><br/>

        <table class = "table">
            <caption>基本的表格布局</caption>
            <thead>
                <tr>
                    <th>名称</th>
                    <th>城市</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Tanmay</td>
                    <td>Bangalore</td>
                </tr>
                <tr>
                    <td>Sachin</td>
                    <td>Mumbai</td>
                </tr>
            </tbody>
        </table>
        <br/><br/><br/>

        <table class="table table-striped">
            <caption>条纹表格布局</caption>
            <thead>
              <tr>
                <th>名称</th>
                <th>城市</th>
                <th>邮编</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>Tanmay</td>
                <td>Bangalore</td>
                <td>560001</td>
              </tr>
              <tr>
                <td>Sachin</td>
                <td>Mumbai</td>
                <td>400003</td>
              </tr>
              <tr>
                <td>Uma</td>
                <td>Pune</td>
                <td>411027</td>
              </tr>
            </tbody>
        </table>
    </body>
</html>

 

标签:副标题,表格,本行,布局,标题,内容,条纹,class
From: https://www.cnblogs.com/wangyihang-xh/p/17228015.html

相关文章

  • 表格
    <html><head><title>1</title><linkrel="stylesheet"href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"><scriptsrc="https:/......
  • Bootstrap 排版和表格
    <html><head><linkrel="stylesheet"href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"><scriptsrc="https......
  • bootstrap布局
     <html><head>  <title>布局</title>  <linkrel="stylesheet"href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> ......
  • 3 图像、超链接、网页布局
    3图像、超链接、页面布局3.1图像标签常见的图像格式:JPG、GIF、PNG、BMP(位图)...<imgsrc="path"alt="text"title="text”width="x”height="y"/>创建一个......
  • 汽车智能化浪潮涌起,经纬恒润全面布局智能座舱领域
        汽车智能化时代已经全面来临,智能驾驶和智能座舱作为汽车智能化时代的主要模块,扮演了至关重要的角色。智能驾驶赋予了人们解放双手的自由,而座舱迎来了功能革新、......
  • 怎么在CAD表格中画斜线?CAD表格斜线一分为二绘制步骤
    在Excel表格中经常能看到用一条斜线将单元格一分为二,那么,你知道怎么在CAD表格中画斜线吗?本文小编就以浩辰CAD软件为例来给大家分享一下CAD表格斜线一分为二的绘制步骤,一起......
  • 前端-表单表格图像-练习
    题目描述请依次写出以下类型的输入框。类型为密码,默认值为"nowcoder"类型为复选框,且状态为已勾选点击查看代码<form><!--补全代码--><inputtype="p......
  • HTML中的表格的基本结构与常用属性
    1、表格的基本结构首先看看图下<table>标签的布局                                    ......
  • 小程序实现固定首行列表格
    数据可视化,数据报表一致是我比较头疼的问题,这几年一直找不到一个合适的工具.主要是编程这块并非是数据分析师的强项.从最初用Excel,到用Python,到用各种商业BI工......
  • PCB布局-整板扇出-拉线-10
      布局:固定的器件先放置好优先摆放重要的功能的模块,然后是次要的好的布局为后期走线准备,考虑走线通道dc电容都是先大后小摆放,进小靠近元件,出大靠近元件,先过滤低频,......