지금까지 구글 블로그에는 테이블 태그를 넣을 수 없었습니다. 테이블 테두리가 생기지 않았기 때문인데요, 구글 블로그 본문에 테이블을 만들어 넣는 과정을 보여드립니다. 그리고 발생한 문제도 있네요. 일단 구글 블로그에 테이블은 넣었으니 응용할 수도 있겠습니다.
구글 블로그는 티스토리와 비교하면 에디터가 너무 후집니다. 티스토리에서 구글 블로그로 이사하려고 망설이는 이유에는 조금 있으면 좋아질 거라고 하는 냄비 속 개구리에 비유하기도 합니다만, 티스토리에서 사용하던 습관으로 구글 블로그를 한다면 너무 불편해서 꺼려지는 분도 많을 겁니다.
그래도 포스팅 10여 개만 발행하면 금방 습관이 붙어 글을 발행하는 데는 거다지 불편을 느끼지 않습니다. 하지만 여전히 불편한 것이 있죠. 하나는 이미지 삽입하는 방법이고, 둘째는 이전 포스팅 링크를 포스팅에 넣는 방법, 그리고 나머지 한 가지는 오늘 소개하는 구글 블로그에 테이블을 만드는 방법입니다.
이전부터 포스팅에서는 이미지보다는 테이블 태그를 선호했습니다. 숫자가 많이 들어간 자료라면 이미지보다는 테이블로 만드는 것이 방문자가 확인하기 쉽습니다. 하지만 결론을 먼저 말씀드리면 1차 시도는 테이블은 생성했지만, 게시판보다 큰 테이블이 들어가면 보이지 않는 부분이 잘려버립니다. 이 부분은 따로 또 연구해야겠습니다.
테이블 태그는 티스토리에서는 문제없이 사용했습니다. 즐겨 사용했죠.
<table border="1" cellpadding="7" cellspacing="2" color="#121212" width="720" style="border-collapse:collapse; text-align:center;">
흔하게 보는 코드 한 줄입니다. 이 코드를 구글 블로그에 적용해 보겠습니다.
HTML 보기에서 코드를 넣고 새 글 작성 화면에서 확인하면 테이블이 만들어진 것이 보입니다. 하지만 미리보기에서는 테두리가 보이지 않고, 역시 글을 발행하면 생뚱맞게 내용만 보입니다.
발행하고나니 테두리가 사라졌습니다.
이런 원인은 구글 블로그는 HTML과 CSS를 직접 사용하는 것을 제한하고 있습니다. 위의 코드처럼 테이블 속성에서 곧바로 영향을 주는 코딩은 허락하지 않습니다. 미리보기에서는 테두리가 보이다가 글을 발행하면 보이지 않는 이유가 여기에 있죠.
테이블 테두리가 보이는 방법은 있습니다.
<th style="border: 1px solid #121212;">순위</th>
<th style="border: 1px solid #121212;">구분</th>
<th style="border: 1px solid #121212;">2022</th>
<th style="border: 1px solid #121212;">2020</th>
테이블 속성이 아닌 td에 속성값을 넣어주는 겁니다.
이렇게 되는데 일일이 넣는 것이 쉽지 않습니다. 오타가 날 확률도 높고요.
이리저리 찾다가 가장 쉬운 방법을 찾았습니다.
그동안 엑셀을 태그로 변환하는 사이트를 사용했습니다. 정말 간편하게 즐겼죠. 테이블 태그로 만들어 보신 분은 아시겠지만, 글자가 들어가는 테이블은 큰 문제는 없습니다. 오타가 나더라도 방문자는 충분히 이해할 수 있습니다. 작성자가 어떤 말을 하려는지 알 수 있으니까요,
하지만 숫자라면 사정이 다릅니다. 잘못되어 숫자가 앞뒤로 바뀌어 입력되면 작성한 사람도 방문자도 전혀 알 길이 없습니다. 그래서 엑셀이나 도표를 테이블 태그로 옮길 때는 숫자만큼은 확인을 더 하는데요, 더 쉬운 방법은 엑셀을 테이블 태그로 바꿔주는 사이트를 이용하면 이런 애로사항은 전혀 걱정할 것이 없습니다. 통째로 붙여서 넣으면 되니까요.
https://www.tablesgenerator.com
지금까지 이 사이트를 이용하면서 CSS 속성은 가져오지 않았습니다. 지금까지 문제없이 사용하고 있는 테이블 속성값이 있으니까요, 그런데 이번에는 여기 CSS 속성값을 포함한 코드를 만듭니다. 아래 Do not generate CSS에 체크하지 않으면 속성값을 포함한 코드를 보여줍니다. 아래 올라온 소스를 복사합니다. 사용 방법은 그렇게 어렵지 않는데요, 자세한 설명은 다음에 다시 소개하겠습니다.
그대로 구글 블로그에 적용했습니다. 테이블이 깔끔하게 만들어졌습니다.
그런데 여기서 문제가 생깁니다. 게시판 크기보다 큰 테이블이라면 가로 스크롤이 생기면서 숨겨져 있는 나머지 테이블 내용도 확인할 수 있어야 하는데, 지금은 꼼짝을 하지 않습니다.
지금 긴 시간이 걸려서 테이블을 중앙 정렬로 넣었습니다. 그리고 또 한 가지 문제는 셀 간격이 조절이 안 됩니다. 이 문제와 가로 스크롤을 만들어 적용하는 것은 조금 더 시간이 걸리겠습니다.
지금까지 인공지능에 질문하고 적용하면서 코드가 더 지저분해진 것 같기도 한데요, 정리한 코드입니다.
<div style="text-align: center;">
<style type="text/css">
.tg {
border-collapse: collapse;
border-spacing: 0;
margin: 0 auto; /* Center the table horizontally */
width: max-content; /* Make the table width dynamic based on content */
}
.tg td, .tg th {
border: 1px solid #ddd;
padding: 10px 7px; /* Adjust the cell spacing */
text-align: left;
}
.tg .tg-cly1{text-align:left;vertical-align:middle}
.tg .tg-wa1i{font-weight:bold;text-align:center;vertical-align:middle}
.tg .tg-7a33{background-color:#FFF;border-color:inherit;color:#5E5F73;font-weight:bold;text-
align:center;vertical-align:middle}
</style>
<table class="tg">
<thead>
<tr>
<th class="tg-7a33">순위</th>
<th class="tg-wa1i">구분</th>
<th class="tg-wa1i">2022</th>
<th class="tg-wa1i">2020</th>
</tr>
</thead>
<tbody>
<tr>
<td class="tg-cly1">1</td>
<td class="tg-cly1">NAVER(네이버)</td>
<td class="tg-cly1">61.20%</td>
<td class="tg-cly1">50.67%</td>
</tr>
</tbody>
</table>
</div>
여기까지입니다.
이 이후는 인공지능도 모른다고 'I apologize for any' 라고 합니다.
조금 더 연구해서 좋은 결과 보여드리겠습니다.