구글블로그(블로그스팟) 표 삽입 방법

구글블로그(블로그스팟) 표 만드는 방법입니다. 글 작성 시 HTML 모드에서 아래 코드를 삽입 후 적절하게 수정 사용하면 됩니다. 예시는 반응형 4×3 표의 HTML 코드입니다. 코드 설명도 참조하면 충분히 활용 가능합니다.

구글 블로그(블로그스팟) 표 만드는 방법(예시 : 4x3 테이블)

아래 코드를 적용하면 다음과 같이 블로그에서 표시됩니다. 구글 블로그에서는 미리보기로 확인 바랍니다.

헤더1	헤더2	헤더3	헤더4
데이터1	데이터2	데이터3	데이터4
데이터5	데이터6	데이터7	데이터8
데이터9	데이터10	데이터11	데이터12

HTML 코드

▼ 다음 코드를 복사해서 편집모드 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>

표 만들기 HTML 코드 설명

반응형 적용(표 전체 크기 조정-너비)

• 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;">

[IT·인터넷 활용] - 구글블로그 CSS 코드 - 페이지네이션

구글블로그 CSS 코드 - 페이지네이션