[Введение в HTML] Урок 10 — Таблица, то есть таблица tag

Тогда область содержимого таблицы требует более подробных данных. Например, номер ученика — 001, имя — Чжан Сан, предмет — математика, оценка — 80. Если других предметов нет, общий балл. равно 80. Если есть еще предметы. Что касается предметов, сложите их, верно?

Это содержимое будет помещено в область содержимого таблицы, для которой требуется тег tbody.

1.3 Строки и столбцы

Таблицы разбиваются на ряды и ряды, а затем разрезаются на столбцы и столбцы. После завершения разрезания каждый фрагмент становится ячейкой, квадратиком и квадратиком.

Более того, обратите внимание:Строки содержат столбцы, это следует помнить。

Имя метки строки: тр 。

Метка ячейки в заголовке й , метка ячейки области тела таблицы имеет видтд 。

2 Немного практики

2.1 Сделайте простую расшифровку


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>我的第一个网页</title>
        <style type="text/css">
            
        </style>
    </head>
    <body>
        <table>
            <thead>
                <tr>
                    <th>学号</th>
                    <th>姓名</th>
                    <th>语文成绩</th>
                    <th>数学成绩</th>
                    <th>HTML成绩</th>
                    <th>总成绩</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>1</td>
                    <td>张三</td>
                    <td>80</td>
                    <td>90</td>
                    <td>96</td>
                    <td>266</td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>李四</td>
                    <td>71</td>
                    <td>80</td>
                    <td>100</td>
                    <td>251</td>
                </tr>
            </tbody>
        </table>
    </body>
</html>

2.2 Добавьте линии границ

Это отображение немного беспорядочное, поэтому добавление линий границ улучшает вид таблицы.Вы можете добавить одинграница="1" Для настройки атрибутов посмотрите код ниже, а затем обновите веб-страницу, чтобы убедиться, что она выглядит намного лучше.


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>我的第一个网页</title>
        <style type="text/css">
            
        </style>
    </head>
    <body>
        <table border="1">
            <thead>
                <tr>
                    <th>学号</th>
                    <th>姓名</th>
                    <th>语文成绩</th>
                    <th>数学成绩</th>
                    <th>HTML成绩</th>
                    <th>总成绩</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>1</td>
                    <td>张三</td>
                    <td>80</td>
                    <td>90</td>
                    <td>96</td>
                    <td>266</td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>李四</td>
                    <td>71</td>
                    <td>80</td>
                    <td>100</td>
                    <td>251</td>
                </tr>
            </tbody>
        </table>
    </body>
</html>

2.3 Перекрестный ряд

Конечно, мы также можем создать отображение перекрестных строк. Например, Чжан Сан и Ли Си из 1-го класса, поместите их в один ряд, а затем ученики из 1-го класса займут 2 ряда.

Затем добавьте класс 2, в который входят Ван У и Чжао Лю, и позвольте им занять большую строку, чтобы у класса 2 было две маленькие строки.

Что здесь нужно установить rowspan Атрибуты.


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>我的第一个网页</title>
        <style type="text/css">
            
        </style>
    </head>
    <body>
        <table border="1">
            <thead>
                <tr>
                    <th>学号</th>
                    <th>班级</th>
                    <th>姓名</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>1</td>
                    <td rowspan="2">1班</td>
                    <td>张三</td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>李四</td>
                </tr>
                <tr>
                    <td>3</td>
                    <td rowspan="2">2班</td>
                    <td>王五</td>
                </tr>
                <tr>
                    <td>4</td>
                    <td>赵六</td>
                </tr>
            </tbody>
        </table>
    </body>
</html>

Глядя на приведенный выше код, мы устанавливаем атрибут rowspan для ячейки td, и тогда это также вторая ячейка класса 1, поэтому нет необходимости добавлять тот же код td.

2.4 Пересечение колонн

Кросс-колонка подразумевает несколько столбцов с одинаковыми характеристиками, поэтому достаточно отобразить информацию об одном столбце. Как и в случае с пересечением строк только что, цель не в том, чтобы Чжан Сань и Ли Сы относились к классу 1, поэтому, чтобы избежать избыточного отображения, поскольку все они имеют одинаковые информационные атрибуты, они оба относятся к классу 1, поэтому отобразить класс 1, достаточно пересечь строку.

Пересечение столбцов означает объединение нескольких столбцов вместе. Давайте возьмем пример.


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>我的第一个网页</title>
        <style type="text/css">
            
        </style>
    </head>
    <body>
        <table border="1">
            <thead>
                <tr>
                    <th>学号</th>
                    <th>班级</th>
                    <th>姓名</th>
                    <th>成绩</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>1</td>
                    <td rowspan="2">1班</td>
                    <td>张三</td>
                    <td>90</td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>李四</td>
                    <td>80</td>
                </tr>
                <tr>
                    <td colspan="4">1班总人数：2，总成绩：170</td>
                </tr>
                <tr>
                    <td>3</td>
                    <td rowspan="2">2班</td>
                    <td>王五</td>
                    <td>70</td>
                </tr>
                <tr>
                    <td>4</td>
                    <td>赵六</td>
                    <td>100</td>
                </tr>
                <tr>
                    <td>4</td>
                    <td>冯七</td>
                    <td>75</td>
                </tr>
                <tr>
                    <td colspan="4">2班总人数：3，总成绩：245</td>
                </tr>
            </tbody>
        </table>
    </body>
</html>

Ха-ха, приведенный выше код,На самом деле, я не могу получить эффект от этого скриншота., если вы получите код и обнаружите проблему, помнитескажи мнеой.

Обмен технологиями

[Введение в HTML] Урок 10 — Таблица, то есть тег таблицы

1 Некоторые подтеги в таблице

1.1 Область заголовка

1.2 Область содержимого таблицы