# Component/Table/Table

> Props: component-table-table.props.txt

## Examples


### Base

기본 테이블 컴포넌트 입니다.

```tsx
{
  parameters: {
    docs: {
      description: {
        story: '기본 테이블 컴포넌트 입니다.'
      }
    }
  },
  render: () => <Stack direction='column' gap={20}>
      <TableContainer>
        <Table>
          <thead>
            <TableRow>
              <TableCol>상품번호</TableCol>
              <TableCol>상품명</TableCol>
              <TableCol align='center'>상품코드</TableCol>
            </TableRow>
          </thead>
          <tbody>
            <TableRow>
              <TableCell>120984</TableCell>
              <TableCell>바나나</TableCell>
              <TableCell align='right'>410</TableCell>
            </TableRow>
          </tbody>
        </Table>
      </TableContainer>

      <TableContainer>
        <Table>
          <TableColGroup cols={[{
          width: 100
        }, {
          width: 500
        }]} />
          <tbody>
            <TableRow>
              <TableCol>연락처</TableCol>
              <TableCell>010-0000-0000</TableCell>
              <TableCol>주소</TableCol>
              <TableCell>서울시 강남구 파르나스타워</TableCell>
            </TableRow>
            <TableRow>
              <TableCol>배송메모</TableCol>
              <TableCell colSpan={3}>부재 시 문앞에 두고 가주세요.</TableCell>
            </TableRow>
            <TableRow>
              <TableCol>이름</TableCol>
              <TableCell>테스트</TableCell>
              <TableCol>연락처</TableCol>
              <TableCell>010-0000-0000</TableCell>
            </TableRow>
            <TableRow>
              <TableCol>반송처</TableCol>
              <TableCell>성남시 분당구 판교역로 235</TableCell>
            </TableRow>
          </tbody>
        </Table>
      </TableContainer>

      <TableContainer>
        <Table>
          <thead>
            <TableRow>
              <TableCol colSpan={3}>1</TableCol>
              <TableCol colSpan={2}>2</TableCol>
            </TableRow>
            <TableRow>
              <TableCol colSpan={2}>1-1</TableCol>
              <TableCol rowSpan={2}>1-2</TableCol>
              <TableCol rowSpan={2}>2-1</TableCol>
              <TableCol rowSpan={2}>2-2</TableCol>
            </TableRow>
            <TableRow>
              <TableCol>1-1-1</TableCol>
              {/* 마지막 항목 이후 셀이 존재하는 경우 border-right 지정 필요 */}
              <TableCol style={{
              borderRight: `1px solid ${semantic_colors.border.primary}`
            }}>1-1-2</TableCol>
            </TableRow>
          </thead>
          <tbody>
            <TableRow>
              <TableCell rowSpan={2} isRowLast>
                A
              </TableCell>
              <TableCell>B</TableCell>
              <TableCell>C</TableCell>
              <TableCell>D</TableCell>
              <TableCell>E</TableCell>
            </TableRow>
            <TableRow>
              <TableCell hidden>A</TableCell>
              <TableCell>B</TableCell>
              <TableCell>C</TableCell>
              <TableCell colSpan={2} isColumnLast>
                D
              </TableCell>
              <TableCell hidden>E</TableCell>
            </TableRow>
          </tbody>
        </Table>
      </TableContainer>
    </Stack>
}
```