구글블로그(블로그스팟) 표 만드는 방법입니다. 글 작성 시 HTML 모드에서 아래 코드를 삽입 후 적절하게 수정 사용하면 됩니다. 예시는 반응형 4×3 표의 HTML 코드입니다. 코드 설명도 참조하면 충분히 활용 가능합니다.
구글 블로그(블로그스팟) 표 만드는 방법
예시 : 4x3 테이블
아래 코드를 적용하면 다음과 같이 블로그에서 표시됩니다. 구글 블로그에서는 미리보기로 확인 바랍니다.
| 헤더 1 | 헤더 2 | 헤더 3 | 헤더 4 |
|---|---|---|---|
| 데이터 1 | 데이터 2 | 데이터 3 | 데이터 4 |
| 데이터 5 | 데이터 6 | 데이터 7 | 데이터 8 |
| 데이터 9 | 데이터 10 | 데이터 11 | 데이터 12 |
▼ 아래 코드를 복사해서 Html에 붙여넣기
<style>.responsive-table {
width: 100%;
max-width: 680px;
border-collapse: collapse;
margin: 10px 0;
font-size: 16px;
text-align: center;
}
.responsive-table th, .responsive-table td {
border: 1px solid #ddd;
padding: 10px;
}
.responsive-table th {
background-color: #f6f6f6;
color: #3a3a4a;
}
@media (max-width: 600px) {
.responsive-table {
font-size: 14px;
}
.responsive-table th, .responsive-table td {
padding: 8px;
}
}
</style>
<table class="responsive-table">
<thead>
<tr>
<th>헤더 1</th>
<th>헤더 2</th>
<th>헤더 3</th>
<th>헤더 4</th>
</tr>
</thead>
<tbody>
<tr>
<td>데이터 1</td>
<td>데이터 2</td>
<td>데이터 3</td>
<td>데이터 4</td>
</tr>
<tr>
<td>데이터 5</td>
<td>데이터 6</td>
<td>데이터 7</td>
<td>데이터 8</td>
</tr>
<tr>
<td>데이터 9</td>
<td>데이터 10</td>
<td>데이터 11</td>
<td>데이터 12</td>
</tr>
</tbody>
</table>
표(Table) 만들기 코드 설명
반응형 적용(표 전체 크기 조정-너비)
- width: 100% / max-width: 680px로 설정하여 화면 크기에 따라 자동 축소 됩니다.
- @media (max-width: 600px)를 추가하여 작은 화면에서 글자 크기를 자동으로 줄입니다.
- <table> 태그의 width 값을 변경하면 표 전체 너비 조정 가능합니다.
- max-width나 min-width 속성 활용 시 반응형 디자인이 됩니다.
<table style="max-width: 100%; min-width: 500px;">
테이블 스타일
- border-collapse : collapse; → 테이블 테두리를 겹침 설정합니다.
- text-align: center; → 텍스트 중앙 정렬합니다.
- padding 적용으로 적절한 간격을 유지합니다.
- <style> 태그 사용으로 구글 블로그 HTML/JavaScript 위젯 또는 글 작성 HTML 편집 모드에서 사용 가능합니다.
셀 크기 조정
- <th> 또는 <td> 태그에 width 값을 추가하여 개별 열의 너비를 조정할 수 있습니다.
<th style="width: 150px;">
높이 조정
- height 속성을 사용하여 행(tr)이나 셀(th, td)의 높이를 변경할 수 있습니다.
<th style="height: 50px;">
텍스트에 따른 테이블 자동 크기 조정
- table-layout: auto;로 변경하면 테이블이 내용에 따라 자동으로 크기를 조정합니다.<table style="table-layout: auto;">
