마크업 요소 어떻게 해야할까요?

[SunNacho]

웹 접근성 공부하고 바꿔보려 하는데 업비트는 코인 리스트를 table로 하더라구요. 관련하여 글을 몇개 찾아보니 table 요소를 자제하는게 좋다고 나와있길래... 어떤 태그가 적당할까요?

[HojinAn]

성능에 관한 고민은 중요한 고민이라 생각합니다!

제가 알기로는 <table> 태그 자체가 성능을 저하시키기 보다는 이를 layout을 위한 요소로 이용할 경우 성능 저하에 영향을 주는 것으로 알고 있어요.
이미지에도 적혀 있듯이 구현하는데 많은 자원을 소모하는 것이니까요. 아마 코인 리스트들은 table 요소에 알맞은 semantic을 적용하기 위해 적용해준 것 같아요

두나무 table, th 태그에 적용된 style 태그를 확인해봤는데요, 이렇게 padding: 0, border-spacing: 0 이 적용되어 있는 걸 볼 수 있죠 chatGPT한테 물어보니 보통 브라우저들에 기본적으로 들어가있는 tables style 코드가 다음과 같다고 해요.

table {
  border-collapse: collapse; /* This collapses the borders of adjacent cells */
  width: 100%; /* This sets the width of the table to 100% of its container */
}

th, td {
  border: 1px solid black; /* This sets a border of 1px solid black around each cell */
  padding: 8px; /* This adds 8 pixels of padding to each cell */
  text-align: left; /* This aligns the text in each cell to the left */
}

th {
  background-color: #f2f2f2; /* This adds a light gray background color to the table header */
}

결론을 적어보자면 결국 table 태그 자체가 발생시키는 성능 저하라기보다는 최적화되지 않은 기본 스타일로부터 오는 성능 저하가 큰 거 같아서 사용하는 우리가 적절히 코드를 작성해줘야 할 듯 해요 ㅎㅎ 웹 접근성을 위해서는 table 태그를 사용하는 게 좋을 것 같다 생각해요. 업비트도 괜히 사용하는게 아닐테니까요?ㅎㅎ

[SunNacho]

아하 table 태그 자체에 문제가 있다가 아니라 table 태그의 기본 스타일이 성능 저하를 초래할 수 있는 거군요. 알겠습니다잉