Excel에서 CSS로 테이블 수정을 내보내는 추가 기능

도구

TachyPochy/tableStyle_withContextMenu

소개

같은 개념을 가진 도구는 많다고 생각합니다만, nth-child 로 셀을 지정하는 것이 특징입니다.

　 이하와 같은 용도로 사용합니다. reStructuredText/Sphinx뿐만 아니라 Markdown에서도 사용할 수 있습니다.

Sphinx, 테이블의 일부를 장식 (일부만 스타일을 변경하고 싶습니다) - Qiita

Mac, Windows 양대응입니다.

대응

　 이하의 장식에 대응하고 있습니다.

문자색 (문자색이 검정이 아닌 경우 CSS 출력)

배경색 (배경색이 흰색이 아닌 경우 CSS 출력)

굵게

기울임꼴

밑줄

사용법

스타일이 적용된 셀 범위를 선택하고 컨텍스트 메뉴에서 CSS to Clipboad를 선택하십시오.

샘플 출력 결과

클립보드에는 다음 코드가 출력됩니다. HTML 색상 코드는 가능하면 색상 이름으로 변환합니다.

    <style type='text/css'>
        #theTableBlock table tr:nth-child(1) th:nth-child(1) {
            color: Red;
            background-color: Yellow;
        }
        #theTableBlock table tr:nth-child(1) td:nth-child(2) {
            background-color: Red;
            font-weight: bold;
        }
        #theTableBlock table tr:nth-child(2) td:nth-child(3) {
            background-color: Blue;
            font-style: italic;
        }
        #theTableBlock table tr:nth-child(3) td:nth-child(4) {
            background-color: #E6B8B7;
            text-decoration: underline;
        }
    </style>
    <div id='theTableBlock'>

        <!-- TODO : write your table tag code here -->

    </div>

주의

1행째는 th 로서 취급합니다. HTML을 작성한다면 ~ 와 ~ 가 필요합니다.

        <table>
            <thead>
                <tr>
                    <th>Test</th>
                    <th>Test</th>
                    <th>Test</th>
                    <th>Test</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Test</td>
                    <td>Test</td>
                    <td>Test</td>
                    <td>Test</td>
                </tr>
                <tr>
                    <td>Test</td>
                    <td>Test</td>
                    <td>Test</td>
                    <td>Test</td>
                </tr>
                <tr>
                    <td>Test</td>
                    <td>Test</td>
                    <td>Test</td>
                    <td>Test</td>
                </tr>
            </tbody>
        </table>

브라우저에서의 렌더링 예