HTML 표 텍스트 차이 (굵게/굵게 표시되지 않음)

Question

저는 HTML/CSS/JavaScript를 처음 사용하며 현재 테이블 내 텍스트로 고민 중입니다.

특히, 내 열 헤더 및 테이블 셀 내에서 굵은 글씨로 사용하는 "하위 레이블"을 사용하면 나머지 텍스트 ("기본"텍스트)를 굵게 표시하지 않는 것이 좋습니다. 이것을 어떻게 성취합니까?

여기에 설명이 포함 된 샘플 HTML이 있습니다. 모든 텍스트는 그대로 내가 코드를 떠날 경우 굵은 나오는 :

<table align="center" style="width: 90%;"> 
 
    <tbody> 
 
    <tr><th style="background-color: #032046;" width="45%"> 
 
    <p style="font-family: helvetica; color: white; font-size: 11;">Column Label 1</p> 
 
    </th><th style="background-color: #032046;" width="15%"> 
 
    <p style="font-family: helvetica; color: white; font-size: 11;">Column Label 2</p> 
 
    </th><th style="background-color: #032046;" width="15%"> 
 
    <p style="font-family: helvetica; color: white; font-size: 11;">Column Label 3</p> 
 
    </th></tr> 
 
    <tr><th border="0" style="background-color: #d4e6fd;"> 
 
    <p style="font-family: helvetica; font-size: 11;"><strong><span style="text-decoration: underline;">Sublabel here.</span></strong></p> 
 
    <p align="left" style="font-family: helvetica; font-size: 11;">"Basic" text here.</p> 
 
    </th><th border="0" style="background-color: #d4e6fd;"> 
 
    <p align="center" style="font-family: helvetica; font-size: 11;">"Basic" text here.</p> 
 
    </th><th border="0" style="background-color: #d4e6fd;"> 
 
    <p align="center" style="font-family: helvetica; font-size: 11;">"Basic" text here.</p> 
 
    </th></tr> 
 
    </tbody> 
 
    </table>

Answer 1

최소한의 코드는 단순히 <td>에 기본 텍스트 세포의 주위에 당신의 <th> 태그를 변경 변경됩니다 요구하려면. th 태그의 글꼴 두께는 기본적으로 굵게 표시됩니다.

그러나 코드에도 여러 불필요한 태그가 포함되어 있으므로 최대한 빨리 예제를 게시 해 보겠습니다.

예 테이블 레이아웃은

<table> 
    <tr> 
     <th>Table heading 1</th> 
     <th>Table heading 1</th>   
     <th>Table heading 1</th> 
    </tr> 
    <tr> 
     <td>Table data 1</td> 
     <td>Table data 2</td> 
     <td>Table data 3</td> 
    </tr> 
</table> 

내가 다음 CSS 스타일 table, tr, th 및 td 선택기보다는 인라인 스타일을 사용하여 테이블을 사용하는 것이 좋습니다 것이 될 것이다. 이렇게하면 코드가 크게 단순 해지고 더 유용 해집니다.

Answer 2

th 태그의 기본 동작은 대부분의 브라우저에서 텍스트를 굵게 표시하는 것입니다. 몸 안쪽에 단순히 td 태그를 대신 사용하십시오. 또한 strong 태그를 사용하면 텍스트가 굵게 표시됩니다.

스타일을 지정하는 데 사용되는 문서와 CSS를 구성하려면 HTML을 사용해야한다는 점에 유의해야합니다. style 속성을 사용하는 대신 외부 CSS 파일을 사용하면 DRYer가 훨씬 쉬우 며 읽고 유지하기가 쉽습니다.

또한 HTML5에서는 align 속성이 지원되지 않습니다. CSS 대신 text-align을 사용해야합니다.

td { background: #d4e6fd; } 
 

 
p { 
 
    font-family: helvetica; 
 
    font-size: 11; 
 
} 
 

 
th { background: #032046; } 
 
th:first-child { width: 45%; } 
 
th:not(:first-child) { width: 15%; } 
 
th > p { color: white; } 
 
span { text-decoration: underline; } 
 

 
td:first-child p { 
 
    text-align: left; 
 
} 
 

 
td:not(:first-child) p { 
 
    text-align: center; 
 
}

<table align="center" style="width: 90%;"> 
 
    <tbody> 
 
    <tr> 
 
     <th> 
 
     <p>Column Label 1</p> 
 
     </th> 
 
     <th> 
 
     <p>Column Label 2</p> 
 
     </th> 
 
     <th> 
 
     <p>Column Label 3</p> 
 
     </th> 
 
    </tr> 
 
    <tr> 
 
     <td border="0"> 
 
     <p><span>Sublabel here.</span></p> 
 
     <p>"Basic" text here.</p> 
 
     </td> 
 
     <td border="0"> 
 
     <p>"Basic" text here.</p> 
 
     </td> 
 
     <td border="0"> 
 
     <p>"Basic" text here.</p> 
 
     </td> 
 
    </tr> 
 
    </tbody> 
 
</table>

Answer 3

당신이 th 태그를 사용했기 때문에,이 (브라우저에 따라) 기본에 대한 대담

당신의 텍스트 굵게, th 태그 tbody 내부 HTML th tag on W3C 및 td을 확인, 테이블 thead 태그 안에 있어야한다 꼬리표.

한 가지 더 많은 일은 인라인 속성을 사용하지 말아야한다는 것입니다. 처음에는 많은 시간을 할애해야하며, 두 번째는 서구 및 유효성 검사 HTML 구문에 적합하지 않습니다.

난 그냥 당신의 HTML과 CSS 코드를 업데이트

, 당신은에 온라인으로 확인할 수 있습니다 https://jsfiddle.net/1y4uksc5/

HTML 코드 :

<table align="center" style="width: 90%;"> 
<thead> 
    <tr> 
    <th width="45%"> 
     <p>Column Label 1</p> 
    </th> 
    <th width="15%"> 
     <p>Column Label 2</p> 
    </th> 
    <th width="15%"> 
     <p>Column Label 3</p> 
    </th> 
    </tr> 
</thead> 
<tbody> 
    <tr> 
    <td> 
     <p><strong class="text-underline">Sublabel</strong></p> 
     <p>"Basic" text here.</p> 
    </td> 
    <td> 
     <p>"Basic" text here.</p> 
    </td> 
    <td> 
     <p>"Basic" texthere.</p> 
    </td> 
    </tr> 
</tbody> 

CSS 코드 :

th { 
    background-color: #032046; 
    color: white; 
} 
td { 
    background-color: #d4e6fd; 
} 
.text-underline { 
    text-decoration: underline; 
} 
p { 
    font-family: helvetica; 
    font-size: 11; 
}