HTML表格
HTML表格
Carbenson 发表于9个月前
HTML表格
  • 发表于 9个月前
  • 阅读 5
  • 收藏 0
  • 点赞 0
  • 评论 0

【腾讯云】买域名送云解析+SSL证书+建站!>>>   

<table block=“1px”>
	<tbody><tr>
		<th>First Name</th>
		<th>Last Name</th>		
		<th>Points</th>
	</tr>
	<tr>
		<td>Jill</td>
		<td>Smith</td>		
		<td>50</td>
	</tr>
	<tr>
		<td>Eve</td>
		<td>Jackson</td>		
		<td>94</td>
	</tr>
	<tr>
		<td>John</td>
		<td>Doe</td>		
		<td>80</td>
	</tr>
	<tr>
		<td>Adam</td>
		<td>Johnson</td>		
		<td>67</td>
	</tr>
</tbody></table>

tr表示一行,tbody表示表格本体,th表示标题行所在的列,效果

字母 td 指表格数据(table data),即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

跨行两行

<table border="1">
<tr>
  <th>Name</th>
  <th colspan="2">Telephone</th>
</tr>
<tr>
  <td>Bill Gates</td>
  <td>555 77 854</td>
  <td>555 77 855</td>
</tr>
</table>

效果:

跨两列

<table border="1">
<tr>
  <th>First Name:</th>
  <td>Bill Gates</td>
</tr>
<tr>
  <th rowspan="2">Telephone:</th>
  <td>555 77 854</td>
</tr>
<tr>
  <td>555 77 855</td>
</tr>
</table>

效果:

带标题

<table> 
<caption>Monthly savings</caption>
</table>

表格内间距(单元格内容与其边框之间的空白)

<table border="1" cellpadding="10">

表格单元格间距(增加单元格之间的距离)

<table border="1" cellspacing="10">

进阶

css

table {
    border-collapse: collapse;//重叠边线
}
//文本居中,高度为30px,边线1px,字为黑色
table, th, td {
    text-align: center;
    height: 30px;
    line-height: 30px;
    border: 1px solid #E2E9EE;
    color: #000000;
}
//单数行为浅粉色
tr:nth-child(odd) {
    background: #FBFCFD;
}

 

 

  • 打赏
  • 点赞
  • 收藏
  • 分享
共有 人打赏支持
粉丝 13
博文 211
码字总数 65410
×
Carbenson
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: