And the introduction of bootstrap jquery
Ordinary table
html comes border line
bootstrap table properties
bootstrap table
Border Line
Rollover color
Compressed form, reducing the density
Adaptive Screen
Interlaced projection (discoloration)
Tables inside text to highlight
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>bootstrap布局</title>
<!--网页源数据跨平台兼容做一些说明-->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--跨屏自适应说明-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></ Script> <TR> <thead> <Table> <h1 of> This is a common form </ h1 of><body>
</ head>
<th>ID</th>
<th>name</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>tom1</td>
<td>这是tom1</td>
</tr>
<tr>
<td>2</td>
<td>tom2</td>
<td>这是tom2</td>
</tr>
<tr>
<td>3</td>
<td>tom3</td>
<td>这是tom3</td>
</ TR> <h1 of> which is carrying the table border html </ h1></ P><P> </ Table>
</ tbody>
<table border="1">
<thead>
<tr>
<th>ID</th>
<th>name</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>tom1</td>
<td>这是tom1</td>
</tr>
<tr>
<td>2</td>
<td>tom2</td>
<td>这是tom2</td>
</tr>
<tr>
<td>3</td>
<td>tom3</td>
<td>这是tom3</td>
</tr>
</tbody>
</table>
<p>
</p>
<!--bootstrap表格-->
<div class="container">
<h1>这是bootstrap表格</h1>
<table class="table">
<thead>
<tr>
<th>ID</th>
<th>name</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>tom1</td>
<td>这是tom1</td>
</tr>
<tr>
<td>2</td>
<td>tom2</td>
<td>这是tom2</td>
</tr>
<tr>
<td>3</td>
<td>tom3</td>
<td>这是tom3</td>
</tr>
</tbody>
</table>
</div>
<p>
</p>
<!--隔行变色-->
<div class="container">
<h1>隔行变色</h1>
<table class="table table-striped">
<thead>
<tr>
<th>ID</th>
<th>name</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<TD> TOM1 </ TD>
<TD> This is TOM1 </ TD>
</ TR>
<TR>
<TD> 2 </ TD>
<TD> tom2 </ td>
<TD> This is tom2 </ td >
</ TR>
<TR>
<TD>. 3 </ TD>
<TD> tom3 </ TD>
<TD> this is tom3 </ TD>
</ TR>
</ tbody>
</ Table>
</ div>
<P>
</ P>
<-! mouse after color ->
<div class = "Container">
<h1 of> mouse discoloration after </h1>
<table class="table table-hover">
<thead>
<tr>
<th>ID</th>
<th>name</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>tom1</td>
<td>这是tom1</td>
</tr>
<tr>
<td>2</td>
<td>tom2</td>
<td>这是tom2</td>
</tr>
<tr>
<td>3</td>
<td>tom3</td> </ Table> </ tbody> </ TR>
<td> This is tom3 </ TD>
</ div>
<-! compressed form, reducing the density ->
<div class = "Container">
<h1 of> compressed form, reducing the density </ h1 of>
<Table class = "Table Table-Condensed">
< thead>
<TR>
<TH> ID </ TH>
<TH> name </ TH>
<TH> description </ TH>
</ TR>
</ thead>
<tbody>
<TR>
<TD>. 1 </ TD >
<TD> TOM1 </ TD>
<TD> this is TOM1 </ TD>
</ TR>
<TR>
<td>2</td>
<td>tom2</td>
<td>这是tom2</td>
</tr>
<tr>
<td>3</td>
<td>tom3</td>
<td>这是tom3</td>
</tr>
</tbody>
</table>
</div>
<!--边框线-->
<div class="container">
<h1>边框线</h1>
<table class="table table-bordered">
<thead>
<tr>
<th>ID</th>
<th>name</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<TD> TOM1 </ TD>
<TD> This is TOM1 </ TD>
</ TR>
<TR>
<TD> 2 </ TD>
<TD> tom2 </ td>
<TD> This is tom2 </ td >
</ TR>
<TR>
<TD>. 3 </ TD>
<TD> tom3 </ TD>
<TD> this is tom3 </ TD>
</ TR>
</ tbody>
</ Table>
</ div>
<P>
</ P>
<-! size adaptive according to the screen ->
<div class = "Container">
<h1 of>The adaptive screen size </ h1 of>
<div class = "Table-responsive">
<Table class = "Table">
<thead>
<tr>
<th>ID</th>
<th>name</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>tom1</td>
<td>这是tom1</td>
</tr>
<tr>
<td>2</td>
<td>tom2</td> <TR> </ TR>
<td> This is tom2 </ TD>
<TD>. 3 </ TD>
<TD> tom3 </ TD>
<TD> This is tom3 </ TD>
</ TR>
</ tbody>
</ Table>
</ div>
</ div>
<P>
< / P>
<-! form inside the highlighted text ->
<div class = "Container">
<h1 of> form inside the highlighted text </ h1 of>
<table class = "table">
<thead>
<TR>
<TH> ID </ TH>
<TH> name </ TH>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr class="info"><!--表格里面加文字突出-->
<td>1</td>
<td>tom1</td>
<td>这是tom1</td>
</tr>
<tr class="success">
<td>2</td>
<td>tom2</td>
<td>这是tom2</td>
</tr>
<tr class="danger">
<td>3</td>
<td>tom3</td> <TR class = "the Active"> <-! currently the active state -> </ TR>
<td> This is tom3 </ td>
<TD>. 4 </ TD>
<TD> tom4 </ TD>
<TD> This is tom4 </ TD>
</ TR>
</ tbody>
</ Table>
</ div>
<-! <div class = "table-responsive"> </ div>: div nested inside the table, according to the screen size of the adaptive ->
<- table ->!
<- HTML carrying box frame:! <table border = ". 1"> ->
<- on Bootstrap table of attributes:! <table class = "table "> </ table> need to be placed inside the container ->
<- on Bootstrap table of attributes:! <table class = " table table-striped "> </ table> interlaced color need to be placed inside the container ->
<- on Bootstrap table of attributes:! <table class ="table table-bordered "> </ table> border lines need to be placed inside the container ->
<- on Bootstrap table of attributes:! <table class =" table table-hover "> </ table> mouse after color need to be placed inside the container ->
<- bootstrap table of attributes:! <table class = "table table-condensed"> </ table> compressed form, reducing the density need to be placed inside the container ->
</ body>
</ HTML>