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

墨辰丷
풀어 주다: 2018-05-16 11:03:29
원래의
3911명이 탐색했습니다.

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

  1. 일반 테이블, 간단한 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 페이지에서 테이블 스크롤 막대 구현

ElTableColumn 확장 방법에 대한 자세한 설명

SQL ALTER TABLE 문의 관련 작업에 대해

위 내용은 HTML로 된 테이블에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트:공공복지 온라인 PHP 교육,PHP 학습자의 빠른 성장을 도와주세요!