안녕하세요
오늘은 HTML 파일에서 테이블 형식으로 코드를 구현하는 방법을 알아보죠
근데 사실 되게 간단한데 테이블 구조만 맞추면 OK 거든요
요거 한번 만들어 보려고 합니다
( 사실 그냥 만들고 css 붙이면 끝이라서 귀찮으면 아래 코드 복붙 ㄱㄱ )
<table class="table" id="dataset">
<thead>
<tr>
<th scope="col">제품명</th>
<th scope="col">가격</th>
<th scope="col">URL</th>
</tr>
</thead>
<tbody>
<tr>
<td>테스트 정보</td>
<td>테스트 정보</td>
<td>테스트 정보</td>
</tr>
<tr>
<td>테스트 정보</td>
<td>테스트 정보</td>
<td>테스트 정보</td>
</tr>
<tr>
<td>테스트 정보</td>
<td>테스트 정보</td>
<td>테스트 정보</td>
</tr>
</tbody>
</table>기본적으로 <table> 안에서 동작하고 아래 tr 부분은 데이터를 담아야 하는 `` ( 백틱 ) 관련 처리를 위한 폼 입니다
여기에 클래스로 table 효과를 주려면
<Body> 위에 <Style> 태그를 열고 .table 에 효과를 주시면 됩니다
#dataset 은 jquerry 가지고 데이터 수정할 때 써먹으면 됩니다
.table {
margin-top: 70px !important;
max-width: 2000px;
width: 55%;
height: 100px;
color: white;
justify-content: center;
align-content: center;
align-items: center;
margin: 0 auto;
text-align: center;
}이런 형식인데 중요한건 color: white; , width / hegiht 값을 줘서 테이블 자체를 건든 거라는 거죠
( 나머지 정렬은 선택 )
만약에 위치 수정하려면 color , width, height , margin: 0 auto; 빼고 나머지 전부 무시하세요
top이나 margin-top !important 로 고정하시면 됩니다