Верстка таблицы

@Lastik228 · Регистрация: 20.04.2017

Author24 — интернет-сервис помощи студентам

Ребят, я только начал изучать CSS
Не хочет рисовать таблицу. Что ему надо?

HTML5

<html>
<head>
<style> 
<head>
<link rel= “stylesheet” href=”css/style.css”>
</head>
 
</style>
</head>
    <body>
        <table class = "second">
        <caption>1 задание</caption>
            <tr>
                <th><div id=th>ячейка 1</div></th><th><div id=th>ячейка 2</div></th><th><div id=th>ячейка 3</th></div>
            </tr>
            <tr>
                <td><div id=td>ячейка 4</div></td><td><div id=td1>ячейка 5</div></td><td><div id=td2>ячейка 6</div></td>
            </tr>
            <tr>
                <td>ячейка 7</td><td>ячейка 8</td><td>ячейка 9</td>
            </tr>
        </table>
    </body>
<body>
 
         <p align=center>
            <font face=Arial>
                2 задание
            </font>
        </p>
          <p>
            <font size=4 face=Arial>
                <s>
                    Привет ,мир!
                </s>
            </font>
        </p>
          <p>
            <font size=4 face=Arial>
                <p>
                    Привет ,мир!
                </p>
            </font>
        </p>
        </table>
         <p>
            <font size=4 face=Arial>
                <u>
                    Привет ,мир!
                </u>
            </font>
                 <p align=center>
            <font face=Arial>
                3 задание
            </font>
        </p>
                <div class = "square">
            <div id="square"></div>
</body>
</html>

CSS

square {
    width: 120px;
    height: 120px;
    background: #f447ff;
}
 .p1 {
    margin-left: 32px;
}
table {
margin: 0 auto; /* центруем по горизонитали внешними отступами */
}
.th {
border: 1px solid teal; /* задаем сплошную границу размером 1 пиксель цвета #F50 */
padding: 19px; /* устанавливаем внутренние отступы для всех сторон */
}
table {
margin: 0 auto; /* центруем по горизонитали внешними отступами */
}
caption {
padding-bottom: 19px;   /* устанавливаем внутренние отступы снизу для всех сторон */
}
.second {
border-spacing: 0; /* промежуток между ячейками таблицы отсутствует */
}
table {
margin: 0 auto; /* центруем по горизонитали внешними отступами */
}
#td {
 text-align:left;
 Font:bold 100%arial;
 border: 1px solid teal; /* задаем сплошную границу размером 1 пиксель цвета #F50 */
padding: 19px; /* устанавливаем внутренние отступы для всех сторон */
}
#td1 {
 text-align:right;
 Font:bold 100%arial;
 border: 1px solid teal; /* задаем сплошную границу размером 1 пиксель цвета #F50 */
padding: 19px; /* устанавливаем внутренние отступы для всех сторон */
}
#td2 {
 text-align:left;
 Font:bold 100%arial;
 border: 1px solid teal; /* задаем сплошную границу размером 1 пиксель цвета #F50 */
padding: 19px; /* устанавливаем внутренние отступы для всех сторон */
}
 
caption {
padding-bottom: 19px;   /* устанавливаем внутренние отступы снизу для всех сторон */
}
.second {
border-spacing: 0; /* промежуток между ячейками таблицы отсутствует */
}

@Fedor92 · 21.02.2018, 09:49

То что Вы пишите просто нечитаемый код... body и head - один открывающий и один закрывающий! Подключаем стили:

HTML5

1	<link rel='stylesheet' href='css/style.css'>

Генератор в помощь: http://www.apsolyamov.ru/files... rator.html

Сообщение от Lastik228

border: 1px solid teal

- смотрите как правильно задавать границы!

@dim3956 · 21.02.2018, 19:01

Может так:

HTML5

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/mystyle.css">
</head>
<body>
<table>
<caption>1 задание</caption>
<thead>
<tr>
<th>ячейка 1</th>
<th>ячейка 2</th>
<th>ячейка 3</th>
</tr>
</thead>
<tbody>
<tr>
<td class="text-right">ячейка 4</td>
<td class="text-left">ячейка 5</td>
<td class="text-left">ячейка 6</td>
</tr>
<tr>
<td class="text-left">ячейка 7</td>
<td>ячейка 8</td>
<td class="text-right">ячейка 9</td>
</tr>
</tbody>
</table>
</body>
</html>

CSS

table{
    margin-left: auto;
    margin-right: auto;
    border: 1px solid black;
    border-collapse: collapse;
    
}
 
caption{
    padding-top: 1rem;
    padding-bottom: 1rem;
    font-weight: bold;
}
 
th, td {
    width: 12rem;
    height: 4rem;
    border: 1px solid black;
    vertical-align: middle;
    text-align: center;
}
 
th{
    font-weight: bold;
}
 
.text-left{
    text-align: left;
}
 
.text-right{
    text-align: right;
}

@cardo · 22.02.2018, 12:05

HTML5

<style> 
<head>
<link rel= “stylesheet” href=”css/style.css”>
</head>
 
</style>

Тут ошибка синтаксиса тег <style> вставляйте либо внутри head либо вообще уберите если подключаете отдельно файл со стилями

Сообщение от Lastik228

<p>

HTML5

<p>
            <font size=4 face=Arial>
                <p>
                    Привет ,мир!
                </p>
            </font>
        </p>

И так уже давно не делают, старый синтаксис, используйте классы

	22.02.2018, 12:05