CSS中的表格(一)_<td class=text-right-CSDN博客

本文链接：https://blog.csdn.net/xvzhengyang/article/details/88208362

如何使用HTML来完成一个表格?
       <table>元素专门负责标记表格数据.
       <tr>每个tr元素构成表格中的一行
       <th>每个th元素分别是某一列的表头;浏览器默认的会用粗体来表示表头.
       <td>每个td元素包含表格中的一个单元格,每个单元格分别构成一个单独的列;包含一个表格数据
       Tips:
       1.如果一行没有足够的元素,会出现什么情况?或者说,实际元素数小于表格中的列数是什么结果?
       答: 如果省去了没有元素的单元格,那么表格就不能正确的对齐,所以要列出所有数据单元格,即使他们的内容为空;
       也就是说元素为空写成<td></td>;
       2.如果我希望表格表头放在表格的左侧,而不是放在上方,能行吗?
       答:可以.只需要把表格表头元素放在各行中即可.
       3.html表格与css表格显示有什么关系?
       答:html表格允许你使用Html标记指定表格结构,而css表格显示则提供了一种方法,可以用一种类似表格的表现
       方式显示块级元素.
       4.表格提供了一种在html中指定表格数据的方法.
       5.表格由行中的数据单元格组成,列隐含的定义在行中.
       6.表格中的列数就是行中数据单元格的个数
       7.表格单元格确实有内边距和边框,就像之前在盒模型中看到的一样,不过在外边距方面稍有些不同;
       我们使用border-spacing:单元格之间的空间,这个是针对整个表格的,不能单独设置各个表格单元格的外边距,
       需要为所有单元格设置一个共同的间距.
       8.在水平方向和垂直方向设置不同的边框间距 border-spacing:10px 30px ; 水平边框间距10像素 30像素的垂直边框间距
       9.除了border-spacing之外,还有一种方法可以解决边框问题;
           border-collapse的CSS属性来折叠边框,这样可以使得单元格之间根本没有边框间距.这样一来,
           浏览器就会忽略表格上设置的所有边框间距.另外还会把紧挨着的两个边框合并成一个边框.这样两个边框就会
           折叠成一个边框.
       10.一种高级的方法来为表格各行增加颜色
           答:这种方法称之为nth-child伪类,伪类会根据元素的状态来指定元素的样式.
           对于nth-child伪类,状态则是一个元素相对于它的兄弟元素的数字顺序,看下面的例子.

可以先看下效果图

代码如下

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表格1</title>
		<style type="text/css">
			td,
			th {
				border: 1px solid black;
				/* 单元格设置边框 */
			}

			table {
				margin-left: 20px;
				margin-right: 20px;
				border: thin solid black;
				/* 表格标题在表格的下方 */
				caption-side: bottom;
				/* border-spacing: 10px 30px; */
				border-collapse: collapse;
			}

			th,
			td {
				border: thin dotted gray;
			}

			th {
				background-color: #00FFFF;
			}

			caption {
				font-style: italic;
				padding-top: 8px;
			}

			.text-center {
				text-align: center;
			}

			.text-right {
				text-align: right;
			}

			.cell-color {
				background-color: #fcba7a;
			}
			/* 使用伪类 nth-child  奇数 偶数 */
			/* p:nth-child(even){
				background-color: red;
			}
			p:nth-child(odd){
				background-color: green;
			} */
			/* 也可以灵活一点使用,数字n指定简单的表达式,从而在选择元素时有更多方式 
			n=0 ,2n=0 2n+1=1  0是无段落,1是第一个段落
			n=1 ,2n=2 2n+1=3  第2个段落,第三个段落
			*/
		   tr:nth-child(even){
		   	background-color: red;
		   }
		   tr:nth-child(odd){
		   	background-color: green;
		   }
			p:nth-child(2n){
				background-color: red;
			}
			p:nth-child(2n+1){
				background-color: green;
			}
		</style>
	</head>
	<body>
		<!-- 分析;一共是7行6列 -->
		<div>

			<table>
				<!--表格的标题 -->
				<caption>
					The table on my study web way
				</caption>
				<tr>
					<!-- 第一行是表头 -->
					<th>city</th>
					<th>date</th>
					<th>temperature</th>
					<th>altitude</th>
					<th>population</th>
					<th>diner rating</th>
				</tr>
				<tr class="cell-color">
					<td>walla</td>
					<td class="text-center">june16</td>
					<td class="text-center">75</td>
					<td class="text-right">1204ft</td>
					<td class="text-right">29686</td>
					<td class="text-center">4/5</td>
				</tr>
				<tr>
					<td>magic</td>
					<td class="text-center">june25</td>
					<td class="text-center">74</td>
					<td class="text-right">5313ft</td>
					<td class="text-right">50</td>
					<td class="text-center">3/5</td>
				</tr>
				<tr class="cell-color">
					<td>bountiful</td>
					<td class="text-center">june10</td>
					<td class="text-center">91</td>
					<td class="text-right">4226</td>
					<td class="text-right">41173</td>
					<td class="text-center">4/5</td>
				</tr>
				<tr>
					<td>lastchance</td>
					<td class="text-center">july23</td>
					<td class="text-center">102</td>
					<td class="text-right">4780ft</td>
					<td class="text-right">265</td>
					<td class="text-center">3/5</td>
				</tr>
				<tr class="cell-color">
					<td>consequence</td>
					<td class="text-center">june16</td>
					<td class="text-center">75</td>
					<td class="text-right">1204ft</td>
					<td class="text-right">29686</td>
					<td class="text-center">4/5</td>
				</tr>
				<tr>
					<td>wht</td>
					<td class="text-center">august 9</td>
					<td class="text-center">104</td>
					<td class="text-right">860ft</td>
					<td class="text-right">480</td>
					<td class="text-center">3/5</td>
				</tr>
			</table>
			<table style="margin-top: 100px;">
				<tr>
					<th>Header</th>
					<th>Header</th>
					<th>Header</th>
					<th>Header</th>
					<th>Header</th>
					<th>Header</th>
				</tr>
				<tr>
					<td class="text-center">june16</td>
					<td class="text-center">75</td>
					<td class="text-right">1204ft</td>
					<td class="text-right">29686</td>
					<td class="text-center">4/5</td>
					<td class="text-center">4/5</td>
				</tr>
				<tr>
					<td class="text-center">june16</td>
					<td class="text-center">75</td>
					<td class="text-right">1204ft</td>
					<td class="text-right">29686</td>
					<td class="text-center">4/5</td>
					<td class="text-center">4/5</td>
				</tr>
				<tr>
					<td class="text-center">june16</td>
					<td class="text-center">75</td>
					<td class="text-right">1204ft</td>
					<td class="text-right">29686</td>
					<td class="text-center">4/5</td>
					<td class="text-center">4/5</td>
				</tr>
				<tr>
					<td class="text-center">june16</td>
					<td class="text-center">75</td>
					<td class="text-right">1204ft</td>
					<td class="text-right">29686</td>
					<td class="text-center">4/5</td>
					<td class="text-center">4/5</td>
				</tr>
				<tr>
					<td class="text-center">june16</td>
					<td class="text-center">75</td>
					<td class="text-right">1204ft</td>
					<td class="text-right">29686</td>
					<td class="text-center">4/5</td>
					<td class="text-center">4/5</td>
				</tr>
			</table>
			<div >
				<p>1</p>
				<p>2</p>
				<p>3</p>
				<p>4</p>
				<p>5</p>
				<p>6</p>
				<p>7</p>
				<p>8</p>
				<p>9</p>
				<p>10</p>
				<p>11</p>
				<p>12</p>
				<p>13</p>
			</div>
		</div>
	</body>
</html>