Номер 2

Курсы Промежуточные испытания
22

Друзья вот хороший вариант на 100%. Не используя классы и прекрасно демонстрируя гибкость использования псевдоклассов, не загаживая ни html ни css коды

HTML

<table>
<tr>
    <th colspan="3"></th>
        <th><img src="/assets/ifmo/medal-gold.png"></th> 
        <th><img src="/assets/ifmo/medal-silver.png"></th> 
        <th><img src="/assets/ifmo/medal-bronze.png"></th> 
        <th><img src="/assets/ifmo/medal-total.png"></th>
            </tr>
<tr>
        <td>1</td>	
        <td><img src="/assets/ifmo/germany.png"></td>
            <td>Германия</td> 	
            <td>7</td>	
            <td>3</td> 	
            <td>2</td> 	
            <td>12</td> </tr>
<tr>
        <td>2</td>
            <td><img src="/assets/ifmo/nederlands.png"></td>	
            <td>Нидерланды</td> 	
            <td>5</td> 	
            <td>5</td> 	
            <td>7</td> 	
            <td>17</td> </tr>
<tr>        
        
        <td>3</td>
            <td><img src="/assets/ifmo/norway.png"></td>	
        <td>Норвегия</td> 	
        <td>5</td> 	
        <td>3</td> 	
        <td>6</td> 	
        <td>14</td> </tr>
<tr>    
        
        <td>4</td>
            <td><img src="/assets/ifmo/switzerland.png"></td>	
        <td>Швейцария</td> 	
        <td>5</td> 	
        <td>1</td> 	
        <td>1</td> 	
        <td>7</td> </tr>
<tr>    
        <td>5</td>
            <td><img src="/assets/ifmo/russia.png"></td>	
        <td>Россия</td> 	
        <td>4</td> 	
        <td>7</td> 	
        <td>5</td> 	
        <td>16</td> </tr>
        </table>

css

table {
    border-collapse:collapse;
}
tr:nth-child(2n) {
    background-color:#eeeeee;
    
}
td,th {
    padding:10px 20px;
    
}
td:first-child {
    font-style:italic;
    color:#999999;
}
td:nth-child(2) {
    padding:0px;
}

td:last-child {
    text-align:right;
    font-weight:bold;
}
23

Поправьте отображение своего кода.

24

А что с ним не так?

25

Теперь так. Вы же исправили.

26

это я поправил :grinning:

1 лайк
27

Подскажите где ошибка?

табл.png1024×724 43.8 KB 

    <html>
<head>
   <title>2 испытание: медальный зачет</title>
   <meta charset="utf-8">
</head>
<body>
    <h1>Медальный зачет</h1>
    <table>
        <tr>
            <td colspan="3"></td>
            <td><img src="/assets/ifmo/medal-gold.png"></td>
            <td><img src="/assets/ifmo/medal-silver.png"></td>
            <td><img src="/assets/ifmo/medal-bronze.png"></td>
            <td class="total"><img src="/assets/ifmo/medal-total.png"></td>
        </tr>
        <tr class="fon">
            <td class="number">1</td>
            <td class="flag"><img src="/assets/ifmo/germany.png"></td>
            <td class="city">Германия </td>
            <td>7</td>
            <td>3</td>
            <td>2</td>
            <td class="total">12</td>
        </tr>
        <tr>
            <td class="number">2</td>
            <td class="flag"><img src="/assets/ifmo/nederlands.png"></td>
            <td class="city">Нидерланды </td>
            <td>5</td>
            <td>5</td>
            <td>7</td>
            <td class="total">17</td>
        </tr>
        <tr class="fon">
            <td class="number">3</td>
            <td class="flag"><img src="/assets/ifmo/norway.png"> </td>
            <td class="city">Норвегия</td>
            <td>5</td>
            <td>3</td>
            <td>6</td>
            <td class="total">14</td>
        </tr>
        <tr>
            <td class="number">4</td>
            <td class="flag"><img src="/assets/ifmo/switzerland.png"></td>
            <td class="city">Швейцария </td>
            <td>5</td>
            <td>1</td>
            <td>1</td>
            <td class="total">7</td>
        </tr>
        <tr class="fon">
            <td class="number">5</td>
            <td class="flag"><img src="/assets/ifmo/russia.png"></td>
            <td class="city">Россия </td>
            <td>4</td>
            <td>7</td>
            <td>5</td>
            <td class="total">16</td>
        </tr>
    </table>
    <!--
    Адреса картинок:
    /assets/ifmo/medal-gold.png
    /assets/ifmo/medal-silver.png
    /assets/ifmo/medal-bronze.png
    /assets/ifmo/medal-total.png
    /assets/ifmo/germany.png
    /assets/ifmo/nederlands.png
    /assets/ifmo/norway.png
    /assets/ifmo/switzerland.png
    /assets/ifmo/russia.png
    -->
</body>

    html, body{
margin:0;
padding:0;

}
body{
width:450px;
font-family:“Arial”, sans-serif;
font-size:16px;
}
h1{
padding:0 20px;
margin:0;
margin-top:20px;
font-size:18px;
font-weight:normal;
}
/*
Все внутренние отступы кратны 5
Серый цвет фона: #eeeeee
Серый цвет цифр: #999999
*/
table {
width: 450px;
border-collapse: collapse;
}
td {
padding: 10px 20px;
}
.fon {
background: #eeeeee;
}
.number {
color: #999999;
text-align: right;
font-style: italic;
padding-left: 20px;
}
.total {
font-weight: bold;
text-align: right;
}
.city {
text-align: left;
padding-left: 0px;
}
.flag {
padding-left: 0px;
}

28

Уберите width у таблицы.
И еще замените “city” на “country”, всё же город и страна - это разные вещи.

2 лайка
29

Спасибо))) получилось))) а касаемо класса я сначала написала а потом вспомнила что страна по другому но править не стала))))