테이블 만들고 있는데 글씨에 색을 넣고 싶습니다

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        table {
            width: 100%;
            border: 1px solid #444444;
            border-collapse: collapse;
        }
        th, td {
            border: 1px solid #444444;
            padding: 10px;
        }
    </style>
</head>
<body>
    <table>
        <th></th>
        <th bgcolor="#ffb5b5">Machinery</th>
        <th bgcolor="#ffb5b5">Size</th>
        <th bgcolor="#ffb5b5">Quantity</th>
        <th bgcolor="#ffb5b5">Output (Month)</th>
        <th bgcolor="#ffb5b5">Output (Year)</th>
            <tr align="center">
                    <td rowspan="8">Main Factory</td>
                    <td>Plastic Extrusin Yarn</td>
                    <td>120-1250mm</td>
                    <td>1 line</td>
                    <td>200 tons</td>
                    <td>2,400 tons</td>
            </tr>
            <tr align="center">
                    
                    <td rowspan="4">Weaving Machine (Water Jet)</td>
                    <td>SS-HL-2100</td>
                    <td>1 set</td>
                    <td>9 tons</td>
                    <td>108 tons</td>
            </tr>
            <tr align="center">
                    
                    
                    <td>SS-HL-2200</td>
                    <td>10 set</td>
                    <td>90 tons</td>
                    <td>1,080 tons</td>
            </tr>
            <tr align="center">
                    
                    
                    <td>SS-HL-2300</td>
                    <td>6 set</td>
                    <td>54 tons</td>
                    <td>648 tons</td>
            </tr>
            <tr align="center">
                    
                    
                    <td>SS-HL-2500</td>
                    <td>2 set</td>
                    <td>18 tons</td>
                    <td>216 tons</td>
            </tr>
            <tr align="center">
                    
                    <td>Laminating Machine (Two side Laminateing)</td>
                    <td>150-2500L (Two Side Laminating and Corona)</td>
                    <td>1 line</td>
                    <td>900 tons</td>
                    <td>10,800 tons</td>
            </tr>
            <tr align="center">
                    
                    <td rowspan="2">Re-winder</td>
                    <td>2100L</td>
                    <td>1 line</td>
                    <td>15 tons</td>
                    <td>180 tons</td>
            </tr>
            <tr align="center">
                    
                    
                    <td>2200L</td>
                    <td>1 line</td>
                    <td colspan="2"></td>
                    
            </tr>
            <tr align="center">
                    <td rowspan="4">2nd Factory</td>
                    <td>Plastic Extrusion Yarn</td>
                    <td>110-1250 mm</td>
                    <td>1 line</td>
                    <td>180 tons</td>
                    <td>2,160 tons</td>
            </tr>
            <tr align="center">
                    
                    <td rowspan="3">Weaving Machine (Water Jet)</td>
                    <td>SS-HL-2100</td>
                    <td>4 set</td>
                    <td>36 tons</td>
                    <td>432 tons</td>
            </tr>
            <tr align="center">
                    
                    
                    <td>SS-HL-2200</td>
                    <td>9 set</td>
                    <td>81 tons</td>
                    <td>972 tons</td>
            </tr>
            <tr align="center">
                    
                    
                    <td>SS-HL-2600</td>
                    <td>1 set</td>
                    <td>9 tons</td>
                    <td>108 tons</td>
            </tr>
    </table>

    </table>
    
</body>
</html>

 

좋은 정보와 인맥을 동시에, 워드프레스 사용자 단톡방 참여하기
좋은 정보와 인맥을 동시에, 워드프레스 사용자 단톡방 참여하기
  • Main Factory,  2nd Factory 는 굵게 만들고싶고요
    Plastic Extrusin Yarn, Weaving Machine (Water Jet), Laminating Machine (Two side Laminateing), Re-winder, Plastic Extrusion Yarn, Weaving Machine (Water Jet) 는 다른 색으로 변경하고 싶습니다.

  • 안녕하세요.

    Main Factory, 2nd Factory 부분을 굵게 표시하시려면

    올려주신 코드 중

    아래의 코드를 찾아서

    <td rowspan="8">Main Factory</td>

    아래의 코드로 교체해보세요.

    <td rowspan="8" style="font-weight: bold">Main Factory</td>

    아래의 코드를 찾아서

    <td rowspan="4">2nd Factory</td>

    아래의 코드로 교체해보세요.

    <td rowspan="4" style="font-weight: bold;">2nd Factory</td>

     

    Plastic Extrusin Yarn, Weaving Machine (Water Jet), Laminating Machine (Two side Laminateing), Re-winder, Plastic Extrusion Yarn, Weaving Machine (Water Jet) 부분을

    다른 색으로 적용하시려면

    아래의 코드를 각각 찾아서

    <td>Plastic Extrusin Yarn</td>
    <td rowspan="4">Weaving Machine (Water Jet)</td>
    <td>Laminating Machine (Two side Laminateing)</td>
    <td rowspan="2">Re-winder</td>
    <td>Plastic Extrusion Yarn</td>
    <td>Plastic Extrusin Yarn</td>
    <td rowspan="3">Weaving Machine (Water Jet)</td>

    아래의 코드처럼 스타일을 추가해보시겠어요?

    <td style="color: blue;">Plastic Extrusin Yarn</td>

    색상은 원하시는 색상으로 교체해보세요.

    고맙습니다.

  • http://inhyukgo.cafe24.com/%ed%9a%8c%ec%82%ac%ec%97%b0%ed%98%81/


    알려주신데로 해서 페이지를 열어보면 정상적으로 보이는데
    홈페이지에 적용하면 이렇게 나와버리네요

    기존에 css table 관련해서 적용한 부분때문에 그런거같은데 손을 못건드리겟습니다.
    한번 봐주시겠어요?

  • 아래와 같은 코드는 직접 추가하신 건지요?

    table tr th:first-child, table tr td:first-child { padding-left: 0; color: #82c121; font-weight: bold; font-size: 1.4em; width: 150px; }

    같은 태그에 서로 다른 CSS 속성을 적용해야 하는 경우라면

    HTML 태그에 직접 스타일을 주는 건 권장드리지 않습니다.

     

    CSS ID 선택자 또는 클래스 선택자를 활용해보시겠어요?

    CSS 선택자에 대한 자세한 내용은

    아래의 링크를 참고해보세요.

    https://www.w3schools.com/cssref/css_selectors.asp

    고맙습니다.

  • #커뮤니티 자동 추천글

    HTML/CSS/웹표준 커뮤니티

    더보기

이미지 사진은 imgur에 업로드한 뒤 링크 걸어주세요.
좋은 정보와 인맥을 동시에, 워드프레스 사용자 단톡방 참여하기