본문 바로가기

Programming/Web

[HTML] table & list

 

 

HTML의 Table 생성 기본 코드

 

<!DOCTYPE html>
<html>
<head>
	<style type="text/css">
		table{
			margin: auto;
			width: 100%;
		}
		table, th, td{
			border:1px solid;
			border-collapse: collapse;
			padding: 10px;
		}
	</style>
</head>
<body>
	<table>
		<caption>Table Title</caption>
		<tr>
			<th>cloumn1</th>
			<th>column2</th>
		</tr>
		<tr>
			<td>content1</td>
			<td>content2</td>
		</tr>
		<tr>
			<td>content1_2</td>
			<td>content2_2</td>
		</tr>
	</table>
</body>
</html>

html

caption ->표 제목

tr ->한 행

th ->칼럼 정의

td ->데이터 차례대로

css

border-collapse:collapse -> 표의 테두리를 한 줄로

 

List 기본 코드

 

<!DOCTYPE html>
<html>
<head>
</head>
<body>
	<h1>List Title</h1>
	<ul>
	  <li>one</li>
	  <li>Two</li>
	  <li>three</li>
	</ul>
</body>
</html>
더보기
<ul>
<ol>

 

<ul> 태그 안에 <li> 로 리스트 작성

ul 대신에 <ol> 사용하면 순서 있는 리스트

 

'Programming > Web' 카테고리의 다른 글

[JavaSript] Fetch API로 JSON Parsing  (0) 2021.02.16
[JavaScript] JQuery와 Ajax  (0) 2021.02.07
[JavaScript] Ajax XMLhttpRequest  (0) 2021.02.07
[HTML] 기초정리  (0) 2021.01.31
[HTML] table & list  (0) 2021.01.31