본문 바로가기
티스토리 꿀팁

[티스토리 표 꾸미기] 테이블 가운데 정렬 방법 (난이도 하)

by 찬지니 2022. 10. 9.
반응형

티스토리 표 가운데 정렬

테이블 가운데 정렬로 글 예쁘게 만들기

테이블 가운데 정렬
테이블 가운데 정렬

난이도 ★☆☆☆☆

 

티스토리를 열심히 운영 중인 1인으로서 글을 더 예쁘고 눈에 잘 들어오게, 읽기 쉽게 만들고 싶은 욕심이 날로 커지는 것 같아요ㅎㅎ 그래서 요즘 html 수정을 통해 기본 기능을 벗어난 작업에 눈을 뜨고 있습니다👁️👁️

 

이런 게 불편한데? 저렇게 할 수는 없을까? 하는 생각이 들면 그때그때 방법을 찾아보고 공유해드리고 있는데, 최근에는 목차를 클릭해서 본문 내 위치를 이동시키는 것이 있었네요😊

 

이번에는 글을 쓸 때 표를 사용하면, PC에서 표의 크기가 작은데 왼쪽에 치우쳐져 있는 모습이 안 예뻐서 찾은 티스토리 테이블 가운데 정렬 방법입니다👏🏻


목차

1. 티스토리 테이블 사용 기본 기능

2. 티스토리 테이블 가운데 정렬 HTML 수정 방법

3. 총평


 

티스토리 테이블 사용 기본 기능


테이블 아이콘을 이용해 표를 만들면,

표 만들기
표 만들기

 

아래와 같이 글자 수에 맞춰 표의 크기를 조절할 수 있습니다.

지니의 오늘 html 수정 유용한 기능
1 본문 내 링크 이동 PC 화면 녹화
2 테이블 가운데 정렬 이미지 업로드 오류 해결

 

그 후 우리가 테이블 꾸미기에 사용할 수 있는 기능은 2가지뿐이에요

  • 테마/ 셀 합치기/ 셀 나누기 / 행열 추가 제거

테이블 줄칸 수정
테이블 줄칸 수정

  • 내부의 글 정렬 (표 자체 위치정렬 불가)

글 정렬
글 정렬

이 기능 외에는 표를 꾸미거나 수정할 수가 없어서, 표를 가운데로 정렬되도록 하는 방법 공유드립니다.

반응형

 

티스토리 테이블 가운데 정렬 HTML 수정 방법


1. 글쓰기 화면에서 기본 모드 클릭> HTML 모드로 변경

HTML 모드
HTML 모드

 

2. Ctrl + F 키를 눌러 작성한 테이블 코드를 찾아주세요. 아래의 코드를 찾아주시면 됩니다.

<table style ~ 생략 ~ </table>

테이블코드
테이블코드

 

3. 테이블 코드 앞 뒤로 아래의 코드를 삽입해주세요

<table style 앞 삽입  <div align="center">
</table> 뒤 삽입  </div>

테이블 코드 추가
테이블 코드 추가

 

HTML 코드 추가 완료!

300x250

 

 

4. 표 가운데 정렬 결과 확인

지니의 오늘 html 수정 유용한 기능
1 본문 내 링크 이동 PC 화면 녹화
2 테이블 가운데 정렬 이미지 업로드 오류 해결

 

테이블이 가운데 정렬되었습니다!

총평


모바일은 표가 꽉 차기 때문에 괜찮지만 PC에서는 왼쪽 정렬되어 신경 쓰였지만 어떤 조치를 못 하고 있었는데, html을 간단하게 수정하면 돼서 굉장히 쉽습니다.

 

그동안 왼쪽에 찌그러져 있던 내 표들 눈 감아😌 앞으로는 표들을 예쁘게 가운데로 정렬해 줄 예정입니다ㅎㅎ

 

그리고 이때 문득 드는 생각!

 

글과 칸이 많은 테이블 표를 작성했을 때, PC에서는 괜찮은데 모바일로 보면 한 칸에 글자 하나씩 뜨면서 세로로 아주 길게 찌그러지는 테이블 표들은 어떻게 할 수 없을까?

 

네, 있었네요ㅋㅋㅋ 다음 포스팅은 모바일에서 찌그러지는 표 가로 스크롤 테이블로 만들기입니다.😊

반응형
그리드형
LIST

댓글