1. 表格的基础构造

2. 边距和边线应用

3. 隐藏和删除应用

1.  简单表格

table {

width:auto;

border-collapse:collapse;

margin-left:20px;

border:1px solid black;

}

td,th {

width:50px;

border:1px solid black;

padding:5px;

background:gold;

text-align:center;

vertical-align:middle;

text-indent:5px;

}

<table>

<tr><th>1</th><th>2</th><th>3</th><th>4</th><th>5</th><th>6</th></tr>

<tr><th>7</th><td>8</td><td>9</td><td>10</td><td>11</td><td>12</td></tr>

</table>

<table>

<tr><th rowspan="2">1</th><th colspan="2">2</th></tr>

<tr><td>8</td><td>9</td><td>10</td><td>11</td><td>12</td></tr>

</table>

2.  行组和列组

table.example1 thead {

background:orange;

color:black;

}

table.example1 tbody {

background:gold;

color:black;

}

table.example1 tfoot {

background:firebrick;

color:white;

}

*.col1 {

background:wheat;

}

*.col2 {

background:gold;

}

*.col3 {

background:orange;

}

*.col4 {

background:tomato;

}

*.col5 {

background:firebrick;

}

*.col6 {

background:black;

color:white;

}

<table class="example1">

<thead>

<tr><th>1</th><th>2</th><th>3</th><th>4</th><th>5</th><th>6</th></tr>

</thead>

<tbody>

<tr><th>7</th><td>8</td><td>9</td><td>10</td><td>11</td><td>12</td></tr>

</tbody>

<tfoot>

<tr><th>13</th><td>14</td><td>15</td><td>16</td><td>17</td><td>18</td></tr>

</tfoot>

</table>

<table>

<colgroup>

<col class="col1" />

<col class="col2" />

<col class="col3" />

<col class="col4" />

<col class="col5" />

<col class="col6" />

</colgroup>

<tr><th rowspan="2">1</th><th colspan="2">2</th></tr>

<tr><td>8</td><td>9</td><td>10</td><td>11</td><td>12</td></tr>

</table>

. 3.  表格选择符

<table class="example1">

<thead>

<tr>

<th class="t1">1</th>

<th class="t2">2</th>

<th>3</th>

<th>4</th>

<th>5</th>

<th>6</th>

</tr>

</thead>

<tbody>

<tr><th>7</th><td>8</td><td>9</td><td>10</td><td>11</td><td>12</td></tr>

</tbody>

<tfoot>

<tr><th>13</th><td>14</td><td>15</td><td>16</td><td>17</td><td>18</td></tr>

</tfoot>

</table>

. 4.  分隔的边框

table {

border-collapse:separate;

}

td,th {

width:50px;

padding:5px;

text-align:center;

vertical-align:middle;

background:gold;

text-indent:5px;

}

.boxed-table {

border:1px solid black;

}

.boxed-cells td {

border:1px solid black;

}

.boxed-cells td.x {

border:none;

}

<h2>封装的表格</h2>

<table class="boxed-table" cellspacing="5">

<tr><td rowspan="2">1</td><td colspan="2">2-3</tr>

<tr><td>7</td><td>8</td><td> </td><td> </td><td

class="x">11</td></tr>

</table>

<h2>封装的单元格</h2>

<table class="boxed-cells" cellspacing="5">

<tr><td rowspan="2">1</td><td colspan="2">2-3</tr>

<tr><td>7</td><td>8</td><td> </td><td> </td><td

class="x">11</td></tr>

</table>

<h2>封装的单元格和表格</h2>

<table class="boxed-table boxed-cells" cellspacing="5">

<tr><td rowspan="2">1</td><td colspan="2">2-3</tr>

<tr><td>7</td><td>8</td><td> </td><td> </td><td

class="x">11</td></tr>

</table>

5.  重复的边框

table {

border-collapse:collapse;

}

td,th {

width:50px;

padding:5px;

text-align:center;

vertical-align:middle;

background:gold;

text-indent:5px;

}

.boxed-table {

border:1px solid black;

}

.boxed-cells td {

border:1px solid black;

}

.boxed-cells td.x {

border:none;

}

<h2>封装的表格</h2>

<table class="boxed-table" cellspacing="0">

<tr><td rowspan="2">1</td><td colspan="2">2-3</tr>

<tr><td>7</td><td>8</td><td> </td><td> </td><td

class="x">11</td></tr>

</table>

<h2>封装的单元格</h2>

<table class="boxed-cells" cellspacing="0">

<tr><td rowspan="2">1</td><td colspan="2">2-3</tr>

<tr><td>7</td><td>8</td><td> </td><td> </td><td

class="x">11</td></tr>

</table>

<h2>封装的单元格和表格</h2>

<table class="boxed-table boxed-cells" cellspacing="0">

<tr><td rowspan="2">1</td><td colspan="2">2-3</tr>

<tr><td>7</td><td>8</td><td> </td><td> </td><td

class="x">11</td></tr>

</table>

. 6.  隐藏和删除单元格、行、列

table {

border-collapse:separate;

}

td,th {

width:50px;

padding:5px;

text-align:center;

vertical-align:middle;

background:gold;

text-indent:5px;

border:1px solid black;

}

.hidden {

visibility:hidden;

}

.delete {

display:none;

}

<table>

<colgroup>

<col class="hidden delete" />

</colgroup>

<tr><td class="delete">1</td><td>2</td><td>3</td><td>4</td></tr>

<tr>

<td class="hidden">5</td>

<td class="hidden">6</td>

<td>7</td>

<td>8</td>

</tr>

</table>

. 7.  垂直对齐数据

.x {

vertical-align:middle;

}

1表格的基础构造1

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>无标题文档</title>
  6. <style type="text/css">
  7. 	table{
  8. 		border:1px solid black;
  9. 	/*	border-collapse  有 设置或检索表格的行和单元格的边是合并在一起还是按照标准的HTML样式分开
  10. 		separate： 边框独立
  11.         collapse： 相邻边被合并   */
  12. 		width: auto;
  13. 		border-collapse: collapse;
  14. 	}
  15. 	th,td{
  16. 		background: gold;
  17. 		width：50px；
  18. 		border: 1px solid black;
  19. 		padding: 5px;
  20. 	}
  21. </style>
  22. </head>
  23.  
  24. <body>
  25. <table>
  26. <tr><th>1</th><th>2</th><th>3</th><th>4</th><th>5</th></tr>
  27. <tr><th>1</th><td>2</td><td>3</td><td>4</td><td>5</td></tr>
  28. </table>
  29. </body>
  30. </html>

　　1表格的基础构造2

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>无标题文档</title>
  6. <style type="text/css">
  7. 	table {
  8. width:auto;
  9. border-collapse:collapse;
  10. margin-left:20px;
  11. border:1px solid black;
  12. }
  13. td,th {
  14. width:50px;
  15. border:1px solid black;
  16. padding:5px;
  17. background:gold;
  18. text-align:center;
  19. vertical-align:middle;
  20. text-indent:5px;
  21. }
  22. </style>
  23. </head>
  24.  
  25. <body>
  26. <table>
  27. <tr><th>1</th><th>2</th><th>3</th><th>4</th><th>5</th><th>6</th></tr>
  28. <tr><th>7</th><td>8</td><td>9</td><td>10</td><td>11</td><td>12</td></tr>
  29. </table>
  30. <table>
  31. <tr><th rowspan="2">1</th><th colspan="2">2</th></tr>
  32. <tr><td>8</td><td>9</td><td>10</td><td>11</td><td>12</td></tr>
  33. </table>
  34.  
  35. </body>
  36. </html>

　　2表格的行组和列组

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>无标题文档</title>
  6. <style type="text/css">
  7. 	table.example1 thead {
  8. background:orange;
  9. color:black;
  10. }
  11. table.example1 tbody {
  12. background:gold;
  13. color:black;
  14. }
  15. table.example1 tfoot {
  16. background:firebrick;
  17. color:white;
  18. }
  19. *.col1 {
  20. background:wheat;
  21. }
  22. *.col2 {
  23. background:gold;
  24. }
  25. *.col3 {
  26. background:orange;
  27. }
  28. *.col4 {
  29. background:tomato;
  30. }
  31. *.col5 {
  32. background:firebrick;
  33. }
  34. *.col6 {
  35. background:black;
  36. color:white;
  37. }
  38. </style>
  39. </head>
  40.  
  41. <body>
  42. <table class="example1">
  43. <thead>
  44. <tr><th>1</th><th>2</th><th>3</th><th>4</th><th>5</th><th>6</th></tr>
  45. </thead>
  46. <tbody>
  47. <tr><th>7</th><td>8</td><td>9</td><td>10</td><td>11</td><td>12</td></tr>
  48. </tbody>
  49. <tfoot>
  50. <tr><th>13</th><td>14</td><td>15</td><td>16</td><td>17</td><td>18</td></tr>
  51. </tfoot>
  52. </table>
  53. <table>
  54. <colgroup>
  55. <col class="col1" />
  56. <col class="col2" />
  57. <col class="col3" />
  58. <col class="col4" />
  59. <col class="col5" />
  60. <col class="col6" />
  61. </colgroup>
  62. <tr><th rowspan="2">1</th><th colspan="2">2</th></tr>
  63. <tr><td>8</td><td>9</td><td>10</td><td>11</td><td>12</td></tr>
  64. </table>
  65.  
  66. </body>
  67. </html>

　　3表格选择符

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>无标题文档</title>
  6. <style type="text/css">
  7. 	table.example1 thead {
  8. background:orange;
  9. color:black;
  10. }
  11. table.example1 tbody {
  12. background:gold;
  13. color:black;
  14. }
  15. table.example1 tfoot {
  16. background:firebrick;
  17. color:white;
  18. }
  19. *.col1 {
  20. background:wheat;
  21. }
  22. *.col2 {
  23. background:gold;
  24. }
  25. *.col3 {
  26. background:orange;
  27. }
  28. *.col4 {
  29. background:tomato;
  30. }
  31. *.col5 {
  32. background:firebrick;
  33. }
  34. *.col6 {
  35. background:black;
  36. color:white;
  37. }
  38. </style>
  39. </head>
  40.  
  41. <body>
  42. <table class="example1">
  43. <thead>
  44. <tr>
  45. <th class="t1">1</th>
  46. <th class="t2">2</th>
  47. <th>3</th>
  48. <th>4</th>
  49. <th>5</th>
  50. <th>6</th>
  51. </tr>
  52. </thead>
  53. <tbody>
  54. <tr><th>7</th><td>8</td><td>9</td><td>10</td><td>11</td><td>12</td></tr>
  55. </tbody>
  56. <tfoot>
  57. <tr><th>13</th><td>14</td><td>15</td><td>16</td><td>17</td><td>18</td></tr>
  58. </tfoot>
  59. </table>
  60.  
  61. </body>
  62. </html>

　　4表格分隔的边框

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>无标题文档</title>
  6. <style type="text/css">
  7. 	table {
  8. border-collapse:separate;
  9. }
  10. td,th {
  11. width:50px;
  12. padding:5px;
  13. text-align:center;
  14. vertical-align:middle;
  15. background:gold;
  16. text-indent:5px;
  17. }
  18. .boxed-table {
  19. border:1px solid black;
  20. }
  21. .boxed-cells td {
  22. border:1px solid black;
  23. }
  24. .boxed-cells td.x {
  25. border:none;
  26. }
  27. </style>
  28. </head>
  29.  
  30. <body>
  31. <h2>封装的表格</h2>
  32. <table class="boxed-table" cellspacing="5">
  33. <tr><td rowspan="2">1</td><td colspan="2">2-3</tr>
  34. <tr><td>7</td><td>8</td><td> </td><td> </td><td
  35. class="x">11</td></tr>
  36. </table>
  37. <h2>封装的单元格</h2>
  38. <table class="boxed-cells" cellspacing="5">
  39. <tr><td rowspan="2">1</td><td colspan="2">2-3</tr>
  40. <tr><td>7</td><td>8</td><td> </td><td> </td><td
  41. class="x">11</td></tr>
  42. </table>
  43. <h2>封装的单元格和表格</h2>
  44. <table class="boxed-table boxed-cells" cellspacing="5">
  45. <tr><td rowspan="2">1</td><td colspan="2">2-3</tr>
  46. <tr><td>7</td><td>8</td><td> </td><td> </td><td
  47. class="x">11</td></tr>
  48. </table>
  49.  
  50. </body>
  51. </html>

　　5表格重复的边框

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>无标题文档</title>
  6. <style type="text/css">
  7. 	table {
  8. border-collapse:collapse;
  9. }
  10. td,th {
  11. width:50px;
  12. padding:5px;
  13. text-align:center;
  14. vertical-align:middle;
  15. background:gold;
  16. text-indent:5px;
  17. }
  18. .boxed-table {
  19. border:1px solid black;
  20. }
  21. .boxed-cells td {
  22. border:1px solid black;
  23. }
  24. .boxed-cells td.x {
  25. border:none;
  26. }
  27. </style>
  28. </head>
  29.  
  30. <body>
  31. <h2>封装的表格</h2>
  32. <table class="boxed-table" cellspacing="0">
  33. <tr><td rowspan="2">1</td><td colspan="2">2-3</tr>
  34. <tr><td>7</td><td>8</td><td> </td><td> </td><td
  35. class="x">11</td></tr>
  36. </table>
  37. <h2>封装的单元格</h2>
  38. <table class="boxed-cells" cellspacing="0">
  39. <tr><td rowspan="2">1</td><td colspan="2">2-3</tr>
  40. <tr><td>7</td><td>8</td><td> </td><td> </td><td
  41. class="x">11</td></tr>
  42. </table>
  43. <h2>封装的单元格和表格</h2>
  44. <table class="boxed-table boxed-cells" cellspacing="0">
  45. <tr><td rowspan="2">1</td><td colspan="2">2-3</tr>
  46. <tr><td>7</td><td>8</td><td> </td><td> </td><td
  47. class="x">11</td></tr>
  48. </table>
  49.  
  50. </body>
  51. </html>

　　6隐藏和删除单元格、行、列

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>无标题文档</title>
  6. <style type="text/css">
  7. 	table {
  8. border-collapse:separate;
  9. }
  10. td,th {
  11. width:50px;
  12. padding:5px;
  13. text-align:center;
  14. vertical-align:middle;
  15. background:gold;
  16. text-indent:5px;
  17. border:1px solid black;
  18. }
  19. .hidden {
  20. visibility:hidden;
  21. }
  22. .delete {
  23. display:none;
  24. }
  25. </style>
  26. </head>
  27.  
  28. <body>
  29. <table>
  30. <colgroup>
  31. <col class="hidden delete" />
  32. </colgroup>
  33. <tr><td class="delete">1</td><td>2</td><td>3</td><td>4</td></tr>
  34. <tr>
  35. <td class="hidden">5</td>
  36. <td class="hidden">6</td>
  37. <td>7</td>
  38. <td>8</td>
  39. </tr>
  40. </table>
  41.  
  42. </body>
  43. </html>

　　7表格 垂直对齐数据

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>无标题文档</title>
  6. <style type="text/css">
  7. 	.x {
  8. vertical-align:middle;
  9. }
  10. </style>
  11. </head>
  12.  
  13. <body>
  14. <table>
  15. <colgroup>
  16. <col id="x" />
  17. </colgroup>
  18. <tr><td class="delete">1</td><td>2</td><td>3</td><td>4</td></tr>
  19. <tr>
  20. <td class="hidden">5</td>
  21. <td class="hidden">6</td>
  22. <td>7</td>
  23. <td>8</td>
  24. </tr>
  25. </table>
  26.  
  27. </body>
  28. </html>

　　

25 ,CSS 构造表格的更多相关文章

  1. CSS构造表格

    表格的基础构造 边距和边线应用 隐藏和删除应用 简单表格 table {     width:auto;     border-collapse:collapse;(把单元格空隙合并起来)     m ...

  2. CSS 构造表格

    表格边框 CSS 中设置表格边框,请使用 border 属性: <style type="text/css"> table{ border:1px solid red; ...

  3. CSS控制表格（table）样式

    CSS控制表格样式 /* 合并边框重叠部分 */ table{border-collapse:collapse;} /* 单元格边框 */ td{border:1px solid #A7AEB1;}

  4. css构造块级元素

    css 1. 宽高width:数值;height:数值;也可用百分比!长高的设置不会被后代继承2. 背景(1)背景颜色background-color:颜色值;元素的背景颜色默认为transparen ...

  5. css构造文本

    1. 1. 文本缩进text-indent:值:值为数字,最常用的数值单位是px(像素),也可以直接是百分比!text-indent:100px;text-indent:10%;2. 文本对齐text ...

  6. 四个好看的CSS样式表格

    文章来源 http://www.cnphp6.com/archives/58020 1. 单像素边框CSS表格 这是一个非经常常使用的表格样式. 源码: 2. 带背景图的CSS样式表格 和上面差点儿相 ...

  7. 常用的四种CSS样式表格

    1. 单像素边框CSS表格 这是一个很常用的表格样式. [html] <style type="text/css"> table.gridtable { font-fa ...

  8. 24, CSS 构造超链接

    1. 超链接边框 2. 派生超链接 3. 属性选择器超链接 4. 动态超链接 5. 图像翻转超链接 6. CSS 工具提示 1.给链接加上边框 A:link { Color: #f00; Text-d ...

  9. 23 , CSS 构造列表与导航

    1. 列表图片 2. 背景列表 3. 翻转列表 4. 水平导航 1. 内边距与外边距 Ul { Margin: 0; Padding: 0; } 2. 使用图片作为列表图标 Ul { Margin: ...

随机推荐

  1. Android编译自己的程序到/system/bin

    背景 有时候我们想创建一个程序,放在系统中,供其他APP执行.我们知道,在生成system.img的时候,编译系统会将out/target/product/[product]/system/bin目录 ...

  2. Spring里的Async注解实现异步操作

    异步执行一般用来发送一些消息数据,数据一致性不要求太高的场景,对于spring来说,它把这个异步进行了封装,使用一个注解就可以实现. 用法 程序启动时开启@EnableAsync注解 建立新的类型,建 ...

  3. 对SVN的落地与实践总结

    现今最为流行的Git是管理很几套很成熟的分支管理策略.而SVN确实也有,但结合现公司的实际场景还是做了些调整和变动. 一.分支命名规则 所有分支命名采用小写字母 + 数字 + 特殊符号 组成 项目分支 ...

  4. JS原型--原型链

    构造函数-->原型--->prototype-->__proto__-->constructor-->原型链 构造函数    什么是构造函数?我理解构造函数就是可以用来生 ...

  5. July 05th. 2018, Week 27th. Thursday

    Pleasure in the job puts perfection in the work. 乐于工作才能有完美表现. From Aristole. Do you want promotion? ...

  6. 关于raft算法

    列出一些比较好的学习资料, 可以经常翻一番,加深印象 0 raft官方git 1  raft算法动画演示 2    Raft 为什么是更易理解的分布式一致性算法 3  raft一致性算法 4  Raf ...

  7. 细说 JavaScript 七种数据类型

    在 JavaScript 规范中,共定义了七种数据类型,分为 “基本类型” 和 “引用类型” 两大类,如下所示: 基本类型:String.Number.Boolean.Symbol.Undefined ...

  8. 总结Java常用到的六个加密技术和代码

    加密,是以某种特殊的算法改变原有的信息数据,使得未授权的用户即使获得了已加密的信息,但因不知解密的方法,仍然无法了解信息的内容.大体上分为双向加密和单向加密,而双向加密又分为对称加密和非对称加密(有些 ...

  9. BASE64编码原理分析脚本实现及逆向案例

    在互联网中的每一刻,你可能都在享受着Base64带来的便捷,但对于Base64的基础原理你又了解多少?今天小编带大家了解一下Base64编码原理分析脚本实现及逆向案例的相关内容.   01编码由来 数 ...

  10. 用github展示自己的网页要做哪些准备（总结）

    以前,如果想建立一个自己的网站,需要买域名,买存储空间,对个人来说维护成本比较高. 并且很多人只是想有一个网页展示自己的作品或者展示个人的简历. 在github越来越成熟的现在,直接使用github托 ...