HTML表格怎麼隱藏內容

HTML表格隱藏內容的方法：1、給表格元素tr、th或td設定hidden屬性，語法「」；2、給表格元素tr、th或td加上“display: none;”樣式。

本教學操作環境：windows7系統、CSS3&&HTML5版、Dell G3電腦。

我們有下面一個表格：

<table border="1">
	<tr>
		<th>姓名</th>
		<th>年龄</th>
	</tr>
	<tr>
		<td>Peter</td>
		<td>20</td>
	</tr>
	<tr>
		<td>Lois</td>
		<td>20</td>
	</tr>
	<tr>
		<td>Lois</td>
		<td>20</td>
	</tr>
	<tr>
		<td>Peter</td>
		<td>20</td>
	</tr>
</table>

想要隱藏HTML表格的內容要怎麼做？下面跟大家介紹幾種方法。

1、為表格元素設定hidden屬性

<table border="1">
	<tr>
		<th>姓名</th>
		<th>年龄</th>
	</tr>
	<tr hidden="hidden">
		<td>Peter1</td>
		<td>20</td>
	</tr>
	<tr>
		<td>Lois1</td>
		<td hidden="hidden">20</td>
	</tr>
	<tr>
		<td>Peter2</td>
		<td>20</td>
	</tr>
	<tr>
		<td>Lois2</td>
		<td>20</td>
	</tr>
	
</table>

#2、為表格元素新增display: none;樣式

<table border="1">
	<tr>
		<th>姓名</th>
		<th>年龄</th>
	</tr>
	<tr>
		<td>Peter1</td>
		<td style="display: none;">20</td>
	</tr>
	<tr style="display: none;">
		<td>Lois1</td>
		<td>20</td>
	</tr>
	<tr>
		<td>Peter2</td>
		<td>20</td>
	</tr>
	<tr>
		<td>Lois2</td>
		<td>20</td>
	</tr>
</table>

推薦教學：《html影片教學》

以上是HTML表格怎麼隱藏內容的詳細內容。更多資訊請關注PHP中文網其他相關文章！