집 > 기사 > 웹 프론트엔드 > HTML로 된 테이블에 대한 자세한 설명

HTML로 된 테이블에 대한 자세한 설명

墨辰丷원래의: 2018-05-16 11:03:293953검색

이 글은 주로 HTML로 된 테이블을 소개하고 있으니 관심 있는 분들이 참고하시면 좋을 것 같습니다.

일반 테이블, 간단한 HTML 테이블은 테이블 요소와 tr, td 및 th 요소로 구성됩니다. 여기서 tr은 테이블 행을 참조하고, td는 셀을 참조하고, th는 헤더를 정의합니다. 빈 셀을 채우지 않은 채로 두거나 를 사용하세요.

<table>	
<tr>		
<th>表头</th>		
<th>表头</th>		
<th>表头</th>	
</tr>	
<tr>		
<td>单元格1
</td>		
<td></td>		
<td>单元格3</td>	
</tr>	
</table>

2. 테두리가 있는 테이블. 테두리 요소는 테이블의 테두리를 나타냅니다. Cellspcing은 테이블 사이의 간격을 나타냅니다.

<table border="1" cellspacing="10" cellpadding="30">
		<tr>
			<th>表头</th>
			<th>表头</th>
			<th>表头</th>
		</tr>
		<tr>
			<td>单元格1</td>
			<td>单元格2</td>
			<td>单元格3</td>
		</tr>
	</table>

3. 배경 이미지나 색상이 있는 테이블. 참고: bgcolor는 색상을 의미하며, 배경은 html에 직접 색상을 추가할 수 없습니다.(이 문장은 잘못되었습니다. 잘못된 방식으로 사용되었습니다. 인라인 형식을 직접 사용하세요. 스타일 쓰기는 style="Background:red" 또는 style="Background-color:red")이며, 테이블에 추가하면 테이블 전체에 대해 설정됩니다. 별도의 tr 또는 td에 설정하면 설정됩니다. 단일 행이나 셀을 설정합니다.

<table border="1">
		<tr>
			<th>表头</th>
			<th>表头</th>
			<th>表头</th>
		</tr>
		<tr>
			<td>单元格1</td>
			<td>单元格2</td>
			<td>单元格3</td>
		</tr>
	</table>

4. 행과 열에 걸쳐 있는 테이블의 경우 rowspan은 행 전체를 의미하고 colspan은 열에 걸쳐 있는 경우 현재 테이블 행에서 삭제됩니다. , 아래 표 행에서 삭제됩니다.

<table border="1">
	<caption>跨行</caption>
		<tr>
		  <th>姓名</th>
		  <td>Bill Gates</td>
		</tr>
		<tr>
		  <th rowspan="2">电话</th>
		  <td>555 77 854</td>
		</tr>
		<tr>
		  <td>555 77 855</td>
		</tr>
	</table>

<table border="1">
	<caption>跨列</caption>
		<tr>
		  <th>姓名</th>
		  <th colspan="2">电话</th>
	</tr>
	<tr>
		  <td>Bill Gates</td>
		  <td>555 77 854</td>
		  <td>555 77 855</td>
	</tr>
</table>

5. 제목이 있는 테이블은 테이블의 제목을 나타냅니다. p 태그와 같은 다른 태그를 사용하여 테이블 제목을 찾을 수도 있습니다. 기본값은 테이블 중앙에 정렬되는 것입니다.

6. 셀에 단락, 목록 등을 추가하는 등 표 셀에 내용을 정렬합니다.

<table border="1">
	<tr>
		<td>
			<p>这是一个段落，hello World！</p>
		</td>
		<td>
			<ul>
				<li>这是一个列表
					<ul>
						<li>html</li>
						<li>css</li>
						<li>javascript</li>
					</ul>
				</li>
			</ul>
		</td>
	</tr>
</table>

7.frame 프레임 속성,

외부 테두리의 어느 부분이 표시되는지 지정합니다. //당분간은 사용하지 않습니다.

HTML로 된 테이블에 대한 자세한 설명

관련 기사