[HTML,CSS] 테이블 만들기

예약 관리 페이지를 만들면서 위 아래 배치가 잘 안 맞는 것을 볼 수 있다.
flex 속성을 통해 gap을 따로 설정했음에도 불구하고
각 글자 수가 달라서 배치가 잘 맞지 않는다. 이럴 때는 어떻게 해야할까??

찾아보니 테이블 형태가 위 아래 배치가 잘 맞아서
테이블 구조로 만들기로 했다.

테이블 만들기

기본적인 태그

• tr (table row) : 행
• td (table data) : 행의 내용
• th (table heading) : 행, 열의 제목
• caption : 표 제목
• col / colgroup : 스타일 지정을 위한 열 (그룹)
• thead : 머리글
• tfoot : 꼬리말
• tbody : 본문

맨 위 행에는 예약 일시, 캠핑장 이름 캠핑존 이름, 체크인/아웃, 주소를 넣고 행의 내용에는 예약 정보 관련 데이터들을 넣을 것이다.

<div>
  <table>
    <thead>
      <tr>
        <th className={styles.th}>예약 일시</th>
        <th className={styles.th}>캠핑장 이름</th>
        <th className={styles.th}>캠핑존 이름</th>
        <th className={styles.th}>체크인/아웃</th>
        <th className={styles.th}>주소</th>
      </tr>
    </thead>
    <tbody>
          //예약 정보 데이터들을 map을 통해 돌아가면서 넣음
        <tr key={id}>
              <td className={styles.td} >
                {new Date(created_at).toLocaleDateString('ko', {
                  year: '2-digit',
                  month: '2-digit',
                  day: '2-digit',
                })}
              </td>
              <td className={styles.td}>
                {campName}
              </td>
              <td className={styles.td}>
                {campAreaName}
              </td>
              <td className={styles.td}>
                <div className={styles.date}>
                  <p>
                    {' '}
                    {`${new Date(check_in_date).toLocaleDateString('ko', {
                      year: '2-digit',
                      month: '2-digit',
                      day: '2-digit',
                    })} ~ `}
                  </p>
                  <p>{`${new Date(check_out_date).toLocaleDateString('ko', {
                    year: '2-digit',
                    month: '2-digit',
                    day: '2-digit',
                  })} `}</p>
                </div>
              </td>
          </tr>
    </tbody>
  </table>
</div>

테이블 형태로 만드니 위 아래 배치가 잘 맞는 것을 확인할 수 있다.

테이블 구조 상 위아래 배치가 잘 맞지만 데이터를 넣으면서
행 제목이 아래로 잘리는 현상이 발생한 경우, 어떻게
너비를 지정할까?

처음에는 간단하게 예약 관련 정보 데이터가 담긴 클래스 td를 선택해
너비를 지정해주는 방식을 생각했다.

.td{
  width:100px;
 }

특정 부분만 너비 100px로 유지하고 일부는 더 많은 너비를 차지하고
있었다. 찾아보니 table-layout:fixed; 속성을 통해
테이블 간 너비 간격을 똑같이 지정할 수 있으나 내가 원하는
위치에 고정되지 않았다.

💡 해결

너비를 지정하고 싶은 요소 태그에 style 속성으로 너비를
지정해주니 내가 원하는 너비만큼 동일하게 설정할 수 있었다.

       <td className={styles.td} style={{ width: '100px' }}>
                {new Date(created_at).toLocaleDateString('ko', {
                  year: '2-digit',
                  month: '2-digit',
                  day: '2-digit',
                })}
              </td>
              <td className={styles.td} style={{ width: '100px' }}>
                {campName}
              </td>
              <td className={styles.td} style={{ width: '100px' }}>
                {campAreaName}
              </td>
              <td className={styles.td}>
                <div className={styles.date}>
                  <p>
                    {' '}
                    {`${new Date(check_in_date).toLocaleDateString('ko', {
                      year: '2-digit',
                      month: '2-digit',
                      day: '2-digit',
                    })} ~ `}
                  </p>
                  <p>{`${new Date(check_out_date).toLocaleDateString('ko', {
                    year: '2-digit',
                    month: '2-digit',
                    day: '2-digit',
                  })} `}</p>
                </div>
              </td>

➡️ 위 아래 배치가 잘 맞고 행 제목도 아래로 잘리지 않고
잘 나오는 것을 확인할 수 있다.

테이블 스타일링 참고