# 테이블 시트 외형

## Content

이 항목에서는 테이블 시트의 외형과 테이블 시트의 모양과 느낌을 향상시키는 다양한 방법에 대해 다룹니다.

## 교대 행 스타일

테이블 시트는 교대로 행 스타일을 지정할 수 있어, 유사한 형태의 행들 사이를 시각적으로 구분하여 동일한 행의 콘텐츠를 식별할 수 있습니다.
`TableSheet` 옵션의 [alternatingRowOptions](/spreadjs/api/v18/classes/GC.Spread.Sheets.TableSheet.TableSheet#options) 를 `step` 배열로 지정하여 하나의 채워진 행과 하나의 빈 행을 나타낼 수 있습니다. 스타일은 [GC.Spread.Sheets.Style](/spreadjs/api/v18/classes/GC.Spread.Sheets.Style) 클래스를 사용하여 적용합니다.

![](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/8d606653-16a0-474d-b9dc-e2b4d01c2446/images/ts-alternaterow.png)

다음 코드 샘플은 테이블 시트에서 교대 행 스타일로 16진수 색상 코드를 추가하는 방법을 보여줍니다.

```javascript
// 교대 행 스타일 생성
sheet.options.alternatingRowOptions = { 
    step: [1, 2],
    style: new GC.Spread.Sheets.Style("#E6EF9D")
};
```

## 아이콘

테이블 시트는 특정 행 및 열에 대해 특수 아이콘을 표시합니다. 시트가 확대되면 아이콘도 함께 커집니다.

![](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/8d606653-16a0-474d-b9dc-e2b4d01c2446/images/ts-icons.png)

다음 표는 사용 가능한 모든 아이콘을 설명합니다.

| 아이콘 | 설명 |
| --- | --- |
| ![ts-pin.png](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/8d606653-16a0-474d-b9dc-e2b4d01c2446/ts-pin.6dce3b.png) | 행 또는 열이 고정되어 있음을 나타냅니다. |
| ![ts-update.png](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/8d606653-16a0-474d-b9dc-e2b4d01c2446/ts-update.44bfb2.png) | 행이 업데이트 되었음을 나타냅니다. |
| ![ts-add.png](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/8d606653-16a0-474d-b9dc-e2b4d01c2446/ts-add.9e15d7.png) | 행이 삽입되었음을 나타냅니다. |
| ![ts-new.png](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/8d606653-16a0-474d-b9dc-e2b4d01c2446/ts-new.d179eb.png) | 새 행을 추가할 수 있음을 나타냅니다. |
| ![ts-key.png](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/8d606653-16a0-474d-b9dc-e2b4d01c2446/ts-key.687836.png) | 열이 기본 키임을 나타냅니다. |
| ![ts-star.png](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/8d606653-16a0-474d-b9dc-e2b4d01c2446/ts-star.5f8378.png) | 열이 필수 항목임을 나타냅니다. |
| ![ts-lock.png](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/8d606653-16a0-474d-b9dc-e2b4d01c2446/ts-lock.850057.png) | 열이 잠겨 있음을 나타냅니다. |

## 테마

테이블 시트는 다양한 내장 테마를 제공하며, [applyTableTheme](/spreadjs/api/v18/classes/GC.Spread.Sheets.TableSheet.TableSheet#applyTableTheme)메서드를 사용하여 테마를 적용할 수 있습니다.
이 메서드는 `firstRowStripStyle`, `headerRowStyle` 등 여러 속성으로 구성된 [GC.Spread.Sheets.Tables.TableTheme](/spreadjs/api/v18/classes/GC.Spread.Sheets.Tables.TableTheme) 인스턴스를 인수로 받습니다.

![](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/8d606653-16a0-474d-b9dc-e2b4d01c2446/images/ts-theme.png)

다음 코드 샘플은 테이블 시트에 내장된 "professional5" 테마를 적용하는 방법을 보여줍니다.

```javascript
// 테이블 시트 변수에 테마 적용
sheet.applyTableTheme(GC.Spread.Sheets.Tables.TableThemes.professional5);
```