精通CSS DIV网页样式与布局设置表单和表格

最新推荐文章于 2024-09-03 03:48:57 发布

画面很美

最新推荐文章于 2024-09-03 03:48:57 发布

阅读量1.5k

点赞数 1

本文链接：https://blog.csdn.net/gfjjggg/article/details/83827068

版权

分享一下我老师大神的人工智能教程！零基础，通俗易懂！http://blog.csdn.net/jiangjunshow

也欢迎大家转载本篇文章。分享知识，造福人民，实现我们中华民族伟大复兴！

表格和表单是网页中非常重要的两个元素，在上篇博客中，我们简单的介绍了CSS的页面背景设置，今天小编继续来介绍CSS的相关知识，在我们的CSS中如何设置表格和表单，首先，来看一张思维导图，通过图简单的预览一下该博文主要讲解哪些CSS的基础知识：

首先我们的首先表格中的标记，代码和运行效果如下所示：

<span style="font-size:18px;"><html><head><title>年度收入</title><style><!--table{ caption-side:bottom;}--></style>   </head><body> <table summary="This table shows the yearly income for years 2004 through 2007" border="1"> <caption>年度收入 2004 - 2007</caption> <tr>  <th></th>  <th scope="col">2004</th>  <th scope="col">2005</th>  <th scope="col">2006</th>  <th scope="col">2007</th> </tr> <tr>  <th scope="row">拨款</th>  <td>11,980</td>  <td>12,650</td>  <td>9,700</td>  <td>10,600</td> </tr> <tr>  <th scope="row">捐款</th>  <td>4,780</td>  <td>4,989</td>  <td>6,700</td>  <td>6,590</td> </tr> <tr>  <th scope="row">投资</th>  <td>8,000</td>  <td>8,100</td>  <td>8,760</td>  <td>8,490</td> </tr> <tr>  <th scope="row">募捐</th>  <td>3,200</td>  <td>3,120</td>  <td>3,700</td>  <td>4,210</td> </tr> <tr>  <th scope="row">销售</th>  <td>28,400</td>  <td>27,100</td>  <td>27,950</td>  <td>29,050</td> </tr> <tr>  <th scope="row">杂费</th>  <td>2,100</td>  <td>1,900</td>  <td>1,300</td>  <td>1,760</td> </tr> <tr>  <th scope="row">总计</th>  <td>58,460</td>  <td>57,859</td>  <td>58,110</td>  <td>60,700</td> </tr></table></body></html></span>

运行效果如下所示：

这是一个年度输入的表格，正文部分首先是一个table标记开始表示的是整个表格，一个caption表示的一个表格的标题，tr表示一个表格的行，而th表示的是一个表格的比较重要的第一行，后面th表示表格的竖着的比较重要的那个行，td表格一个一个的单元格，运行效果如上图所示。这些标记：tr、th、td都是组成表格不可缺少的元素。刚才的表格非常淡雅，我们仅仅只是为了表示表格的标记，那么CSS是如何控制表格的颜色的呢？看我们接下来的例子代码和运行效果：

<span style="font-size:18px;"><html><head><title>年度收入</title><style><!--body{ background-color:#ebf5ff; /* 页面背景色 */ margin:0px; padding:4px; text-align:center;   /* 居中对齐（IE有效） */}.datalist{ color:#0046a6;    /* 表格文字颜色 */ background-color:#d2e8ff; /* 表格背景色 */ font-family:Arial;   /* 表格字体 */}.datalist caption{ font-size:18px;    /* 标题文字大小 */ font-weight:bold;   /* 标题文字粗体 */}.datalist th{ color:#003e7e;    /* 行、列名称颜色 */ background-color:#7bb3ff; /* 行、列名称的背景色 */}--></style>   </head><body> <table summary="This table shows the yearly income for years 2004 through 2007" border="1" class="datalist"> <caption>年度收入 2004 - 2007</caption> <tr>  <th></th>  <th scope="col">2004</th>  <th scope="col">2005</th>  <th scope="col">2006</th>  <th scope="col">2007</th> </tr> <tr>  <th scope="row">拨款</th>  <td>11,980</td>  <td>12,650</td>  <td>9,700</td>  <td>10,600</td> </tr> <tr>  <th scope="row">捐款</th>  <td>4,780</td>  <td>4,989</td>  <td>6,700