Работа с таблицами в css

Отображение границ ячеек

CSS позволяет установть не только стиль границы таблицы, но и стиль границ отдельных ячеек. Так как у каждой ячейки свои границы, то между соседними ячейками граница получается сдвоенная. Но существует возможность объединить границы соседних ячеек в одну. Для этого есть свойство border-collapse. Оно принимает значения:

border-collapse: separate — у каждой ячейки своя граница (по умолчанию)


border-collapse: collapse — общая граница

border-collapse: inherit — значение принимается от родительского элемента

Для примера создадим таблицу и зададим рамку ячейкам всех таблиц, которые будут на странице. Сначала не будем ничего менять, чтобы посмотреть, как таблица будет выглядеть:

Стиль:

+

78910
td
  {
  border: 1px solid Red;
  }

HTML код:

1415161718 19202122
<table id="t1">
  <tr>
    <td>строка 1 ячейка 1</td>
    <td>строка 1 ячейка 2</td>
  </tr>
  <tr>
    <td>строка 2 ячейка 1</td>
    <td>строка 2 ячейка 2</td>
</tr></table>

Обратите внимание, у каждой ячейки своя граница. В разных браузерах CSS стиль таблицы может немного отличаться

В одних браузерах по умолчанию между ячейками есть определённое расстояние. В других границы таблицы соприкасаются.

Теперь установим таблице свойство border-collapse.

11121314
#t1
  {
  border-collapse: collapse;
  }

Границы ячеек объединились, теперь у каждой ячейки нет своей рамки, а одна рамка находится между ячейками.

Горизонтальное и вертикальное выравнивание

В большинстве случаев при работе с таблицами вам придется настраивать выравнивание содержимого внутри заголовочных ячеек и ячеек данных. Свойство text-align применяется для горизонтального выравнивания по аналогии с любой текстовой информацией. Применение этого свойства для текста мы рассматривали ранее в статье «Форматирование текста в CSS».

Чтобы установить выравнивание для содержимого в ячейках, необходимо использовать специальные ключевые слова со свойством text-align. Рассмотрим применение ключевых слов этого свойства на следующем примере.

<!DOCTYPE html>
<html>
<head>
	<title>Пример горизонтального выравнивания в таблице</title>
<style> 
table {
border-collapse: collapse; /* объединяем границы ячеек в одну */	
}
td, th {
border: 1px solid; /* задаем сплошную границу размером 1 пиксель */
}
.left {
text-align: left; /* выравнивает текст ячейки влево */
}
.right {
text-align: right; /* выравнивает текст ячейки вправо */
}
.center {
text-align: center; /* выравнивает текст ячейки по центру */
}
.justify {
text-align: justify; /* выравнивает текст ячейки по ширине */
}
</style>
</head>
	<body>
		<table>
			<tr>
				<th>Значение</th><th>Описание</th>
			</tr>
			<tr class = "left">
				<td>left</td><td>Выравнивает текст ячейки влево. Это значение по умолчанию (если направление текста слева направо).</td>
			</tr>
			<tr class = "right">
				<td>right</td><td>Выравнивает текст ячейки вправо. Это значение по умолчанию (если направление текста справа налево).</td>
			</tr>
			<tr class = "center">
				<td>center</td><td>Выравнивает текст ячейки по центру.</td>
			</tr>
			<tr class = "justify">
				<td>justify</td><td>Растягивает линии так, что каждая линия имеет одинаковую ширину (растягивает текст ячейки по ширине).</td>
			</tr>
		</table>
	</body>
</html>

В этом примере мы создали четыре класса, которые задают различное горизонтальное выравнивание в ячейках и применили их по порядку к строкам таблицы. Значение в ячейке соответствует значению свойства text-align, которое было применено к этой строке.

Результат нашего примера:

Рис. 149 Пример горизонтального выравнивания в таблице.

Кроме горизонтального выравнивания вы также можете определить и вертикальное выравнивание в ячейках таблицы с помощью свойства vertical-align.

Обращаю Ваше внимание, что при работе с ячейками таблицы применяются только следующие значения* этого свойства:

Значение Описание
baseline Выравнивает базовую линию ячейки по базовой линии родителя. Это значение по умолчанию.
top Выравнивает содержимое ячейки вертикально по верхнему краю.
middle Выравнивает содержимое ячейки вертикально по середине.
bottom Выравнивает содержимое ячейки вертикально по нижнему краю.

* — Значения sub, super, text-top, text-bottom, length и %, примененные к ячейке таблицы будут вести себя как при использовании значения baseline.

Рассмотрим пример использования:

<!DOCTYPE html>
<html>
<head>
	<title>Пример вертикального выравнивания в таблице</title>
<style> 
table {
border-collapse: collapse; /* объединяем границы ячеек в одну */	
}
td, th {
border: 1px solid; /* задаем сплошную границу размером 1 пиксель */
height: 55px; /* задаем высоту ячеек */
}
.baseline {
vertical-align: baseline; /* выравнивает базовую линию ячейки по базовой линии родителя */
}
.top {
vertical-align: top; /* выравнивает содержимое ячейки вертикально по верхнему краю */
}
.middle {
vertical-align: middle; /* выравнивает содержимое ячейки вертикально по середине */
}
.bottom {
vertical-align: bottom; /* выравнивает содержимое ячейки вертикально по нижнему краю */
}
</style>
</head>
	<body>
		<table> 
			<tr>
				<th>Значение</th><th>Описание</th>
			</tr>
			<tr class = "baseline"> 
				<td>baseline</td><td>Выравнивает базовую линию ячейки по базовой линии родителя. Это значение по умолчанию.</td>
			</tr>
			<tr class = "top"> 
				<td>top</td><td>Выравнивает содержимое ячейки вертикально по верхнему краю.</td>
			</tr>
			<tr class = "middle"> 
				<td>middle</td><td>Выравнивает содержимое ячейки вертикально по середине.</td>
			</tr>
			<tr class = "bottom"> 
				<td>bottom</td><td>Выравнивает содержимое ячейки вертикально по нижнему краю.</td>
			</tr>
		</table> 
	</body>
</html>

В этом примере мы создали четыре класса, которые задают различное вертикальное выравнивание в ячейках и применили их по порядку к строкам таблицы. Значение в ячейке соответствует значению свойства vertical-align, которое было применено к этой строке.

Рис. 150 Пример вертикального выравнивания в таблице.

Все способы сделать цветную границу таблицы

  1. -> style
  2. -> class
  3. -> id
  4. -> файл css
  1. Для того, чтобы показать пример границы таблицы черным цветом по умолчанию приведем простую таблицу с border=1 <table width=»500″ border=1>

    Как видим на ниже приведенном примере, цвет границы таблицы по умолчанию — черный:

    border=1 Цвет черны для границы
  2. Для того, чтобы покрасить границу таблицы в какой-то цвет, мы можем воспользоваться атрибутом Цвет границы таблицы через атрибут style:

    style=»border:3px solid #E73134″

    Код таблицы:

    <table width=»500″ style=»border:3px solid #E73134″>

    <tbody>

    <tr>

    <td>&nbsp;</td>

    </tr>

    </tbody>

    </table>

    Как видим — такой способ красить границу таблицы, окрашивает только внешнюю границу таблицы! А перегородки таблицы и не затрагивает!

    текст текст
  3. Следующий способ сделать цветную границу таблицы — это использование класса. Создадим како-то класс, в котором пропишем свойство цветной границы таблицы, но как мы помним, из выше приведенного примера, то у нас отсутствовала перегородка внутри таблицы, поэтому, мы цветную границу пропишем каждой ячейке td:

    .tsvetnaya-granitsa td{

    border: solid; border-color:#253ECC;

    }

    И чтобы у нас не было двойной границы добавим border-collapse: collapse;

    table.tsvetnaya-granitsa {

    border-collapse: collapse;

    }

    Соберем всю таблицу со стилями цветной границы вместе:

    <style>table.tsvetnaya-granitsa { border-collapse: collapse; } .tsvetnaya-granitsa td{ border: solid; border-color:#253ECC; } </style>

    <table width=»500″ class=»tsvetnaya-granitsa»>

    <tbody>

    <tr>

    <td>здесь текст</td>

    <td>здесь текст</td>

    </tr>

    </tbody>

    </table>

    Результат вывода на экран таблицы с цветной границей таблицы через класс:

    здесь текст здесь текст
  4. Цвет границы таблицы можно прописать через -> id, берем, весь код, что был приведен выше и заменяем класс на идентификатор!

    Алгоритм окраски границ таблиц через идентификатор аналогичный предыдущему пункту, поэтому стразу соберем всю таблицу вместе! И изменим цвет границы на зеленый, чтобы чуть=чуть отличаться!

    <style>table#tsvetnaya-granitsa { border-collapse: collapse; } #tsvetnaya-granitsa td{ border: solid; border-color: color:green } </style>

    <table width=»500″ id=»tsvetnaya-granitsa»>

    <tbody>

    <tr>

    <td>здесь текст</td>

    <td>здесь текст</td>

    </tr>

    </tbody>

    </table>

    Результат вывода на экран таблицы с цветной границей таблицы через идентификатор:

    здесь текст здесь текст
  5. Для того, чтобы покрасить границы таблицы в какой-то из цветом через css , нам нужно:

    1).Сделать файл css 2).Прикрепить css к странице

    Берем код, из выше приведенных примеров, либо класса, либо ид, и прописываем в нашем файле css

    Понятно, что в файл css нужно вставлять класс(id) без style

    .tsvetnaya-granitsa td{

    border: solid; border-color:#253ECC;

    }

    table.tsvetnaya-granitsa {

    border-collapse: collapse;

    }

    Да! И забыл!

    Все приведенные примеры окрашивания границ таблиц, кроме последнего будут действовать локально! Т.е. на определенной странице!

Вас может еще заинтересовать список тем : #HTML | #CSS | #TABLE | #COLOR | Последняя дата редактирования : 2020-04-30 07:50 https://dwweb.ru/comments_1_5/include/img/hand_no_foto.png no no   BBcode

CSS Tutorial

CSS HOMECSS IntroductionCSS SyntaxCSS SelectorsCSS How ToCSS CommentsCSS Colors Colors RGB HEX HSL

CSS Backgrounds Background Color Background Image Background Repeat Background Attachment Background Shorthand

CSS Borders Borders Border Width Border Color Border Sides Border Shorthand Rounded Borders

CSS Margins Margins Margin Collapse

CSS PaddingCSS Height/WidthCSS Box ModelCSS Outline Outline Outline Width Outline Color Outline Shorthand Outline Offset

CSS Text Text Color Text Alignment Text Decoration Text Transformation Text Spacing Text Shadow

CSS Fonts Font Family Font Style Font Size Font Google Font Shorthand

CSS IconsCSS LinksCSS ListsCSS TablesCSS DisplayCSS Max-widthCSS PositionCSS OverflowCSS Float Float Clear Float Examples

CSS Inline-blockCSS AlignCSS CombinatorsCSS Pseudo-classCSS Pseudo-elementCSS OpacityCSS Navigation Bar Navbar Vertical Navbar Horizontal Navbar

CSS DropdownsCSS Image GalleryCSS Image SpritesCSS Attr SelectorsCSS FormsCSS CountersCSS Website LayoutCSS UnitsCSS Specificity

Еще примеры

Все свойства границы в одном объявлении В этом примере показано, сокращенное свойство для установки всех свойств для верхней границы в одном объявлении.

Установить стиль нижней границы В этом примере показано, как задать стиль нижней границы.

Установить ширину левой границы В этом примере показано, как задать ширину левой границы.

Установить цвет четырех границ В этом примере показано, как задать цвет из четырех границ. Свойство может иметь от одного до четырех цветов.

Установить цвет правой границы В этом примере показано, как настроить цвет правой границы.

Все CSS свойства границ

Свойства Описание
border Устанавливает все свойства границы в одном объявлении
border-bottom Устанавливает нижнюю границу свойства в одном объявлении
border-bottom-color Устанавливает цвет нижней границы
border-bottom-style Устанавливает стиль нижней границы
border-bottom-width Устанавливает ширину нижней границы
border-color Устанавливает цвет четыре границы
border-left Устанавливает левую границу свойства в одном объявлении
border-left-color Устанавливает цвет левой границы
border-left-style Устанавливает стиль левой границы
border-left-width Устанавливает ширину левой границы
border-radius Устанавливает все четыре свойства border-*-radius закругленными углами
border-right Устанавливает все свойства правой границы в одном объявлении
border-right-color Устанавливает цвет правой границы
border-right-style Устанавливает стиль правой границы
border-right-width Устанавливает ширину правой границы
border-style Устанавливает стиль четырех границ
border-top Устанавливает все верхние границы свойства в одной декларации
border-top-color Устанавливает цвет верхней границы
border-top-style Устанавливает стиль верхней границы
border-top-width Устанавливает ширину верхней границы
border-width Устанавливает ширину четырех границ

Делаем границы таблицы невидимыми

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

Включение сетки

1. Во вкладке “Главная” (“Формат” в MS Word 2003 или “Разметка страницы” в MS Word 2007 — 2010) в группе “Абзац” нажмите на кнопку “Границы”.

2. Выберите в развернувшемся меню пункт “Отобразить сетку”.

Сделав это, мы можем смело переходить к описанию того, как сделать невидимую таблицу в Ворде.

Скрытие всех границ таблицы

1. Выделите таблицу, используя для этого мышку.

2. Кликните правой кнопкой мышки по выделенному полю и выберите в контекстном меню пункт “Свойства таблицы”.


3. В открывшемся окне нажмите расположенную снизу кнопку “Границы и заливка”.

4. В следующем окне в разделе “Тип” выберите первый пункт “Нет”. В разделе “Применить к” установите параметр “таблице”.Нажмите кнопку “ОК” в каждом из двух открытых диалоговых окон.

5. После того, как вы выполните вышеописанные действия, граница таблицы из сплошной линии одного цвета превратится в бледный пунктир, который, хоть и помогает ориентироваться в строках и столбцах, ячейках таблицы, но на печать при этом не выводится.

  1. Совет: Если вы отключите отображение сетки (меню инструмента “Границы”), пунктирная линия тоже исчезнет.

Скрытие некоторых границ таблицы или границ некоторых ячеек

1. Выделите ту часть таблицы, границы в которой необходимо скрыть.

2. Во вкладке “Конструктор” в группе “Обрамление” нажмите на кнопку “Границы” и выберите необходимый параметр для скрытия границ.

Урок: Как сделать продолжение таблицы в Word

4. Нажмите клавишу “ESC”, чтобы выйти из режима работы с таблицей.

Скрытие определенной границы или определенных границ в таблице

Если это необходимо, вы всегда можете скрыть конкретные границы в таблице, не заморачиваясь при этом с выделением отдельного фрагмента или фрагментов.Данный метод особенно хорошо использовать в случае, когда вам необходимо скрыть не только одну конкретную границу, но и несколько границ, расположенных в разных местах таблицы, за один раз.

1. Кликните в любом месте таблицы, чтобы отобразилась основная вкладка “Работа с таблицами”.

2. Перейдите во вкладку “Конструктор”, в группе “Обрамление” выберите инструмент “Стили оформления границ” и выберите белую (то есть, невидимую) линию.

  1. Совет: Если белая линия не отображается в выпадающем меню, выберите сначала ту, которая используется в качестве границ в вашей таблице, а затем измените ее цвет на белый в разделе “Стили пера”.

3. Указатель курсора примет вид кисти. Просто кликните ею в том месте или тех местах, где необходимо убрать границы.

  1. Совет: Для удаления границ нескольких ячеек подряд кликните левой кнопкой мышки на первой границе и протяните кисть до последней границы, которую вы хотите удалить, затем отпустите левую кнопку.

4. Нажмите “ESC”, чтобы выйти из режима работы с таблицами.

Урок: Как объединить ячейки таблицы в Ворде

На этом мы закончим, ведь теперь вы знаете еще больше о таблицах в MS Word и умеете скрывать их границы, делая полностью невидимыми. Желаем вам успехов и только положительных результатов в дальнейшем освоение этой продвинутой программы для работы с документами.

Опишите, что у вас не получилось. Наши специалисты постараются ответить максимально быстро.

More Examples

Example

A dashed border:

div {border-style: dashed;}

Example

A solid border:


div {border-style: solid;}

Example

A double border:

div {border-style: double;}

Example

A groove border:

div {  border-style: groove;  border-color: coral;   border-width: 7px;}

Example

A ridge border:

div {  border-style: ridge;  border-color: coral;  border-width: 7px;}

Example

An inset border:

div {  border-style: inset;  border-color: coral;   border-width: 7px;}

Example

An outset border:

div {  border-style: outset;  border-color: coral;  border-width: 7px;}

Example

Set different borders on each side of an element:

p.one {border-style: dotted solid dashed double;} p.two {border-style: dotted solid dashed;} p.three {border-style: dotted solid;} p.four {border-style: dotted;}

CSS Properties

align-contentalign-itemsalign-selfallanimationanimation-delayanimation-directionanimation-durationanimation-fill-modeanimation-iteration-countanimation-nameanimation-play-stateanimation-timing-functionbackface-visibilitybackgroundbackground-attachmentbackground-blend-modebackground-clipbackground-colorbackground-imagebackground-originbackground-positionbackground-repeatbackground-sizeborderborder-bottomborder-bottom-colorborder-bottom-left-radiusborder-bottom-right-radiusborder-bottom-styleborder-bottom-widthborder-collapseborder-colorborder-imageborder-image-outsetborder-image-repeatborder-image-sliceborder-image-sourceborder-image-widthborder-leftborder-left-colorborder-left-styleborder-left-widthborder-radiusborder-rightborder-right-colorborder-right-styleborder-right-widthborder-spacingborder-styleborder-topborder-top-colorborder-top-left-radiusborder-top-right-radiusborder-top-styleborder-top-widthborder-widthbottombox-decoration-breakbox-shadowbox-sizingbreak-afterbreak-beforebreak-insidecaption-sidecaret-color@charsetclearclipclip-pathcolorcolumn-countcolumn-fillcolumn-gapcolumn-rulecolumn-rule-colorcolumn-rule-stylecolumn-rule-widthcolumn-spancolumn-widthcolumnscontentcounter-incrementcounter-resetcursordirectiondisplayempty-cellsfilterflexflex-basisflex-directionflex-flowflex-growflex-shrinkflex-wrapfloatfont@font-facefont-familyfont-feature-settingsfont-kerningfont-sizefont-size-adjustfont-stretchfont-stylefont-variantfont-variant-capsfont-weightgridgrid-areagrid-auto-columnsgrid-auto-flowgrid-auto-rowsgrid-columngrid-column-endgrid-column-gapgrid-column-startgrid-gapgrid-rowgrid-row-endgrid-row-gapgrid-row-startgrid-templategrid-template-areasgrid-template-columnsgrid-template-rowshanging-punctuationheighthyphens@importisolationjustify-content@keyframesleftletter-spacingline-heightlist-stylelist-style-imagelist-style-positionlist-style-typemarginmargin-bottommargin-leftmargin-rightmargin-topmax-heightmax-width@mediamin-heightmin-widthmix-blend-modeobject-fitobject-positionopacityorderoutlineoutline-coloroutline-offsetoutline-styleoutline-widthoverflowoverflow-xoverflow-ypaddingpadding-bottompadding-leftpadding-rightpadding-toppage-break-afterpage-break-beforepage-break-insideperspectiveperspective-originpointer-eventspositionquotesresizerightscroll-behaviortab-sizetable-layouttext-aligntext-align-lasttext-decorationtext-decoration-colortext-decoration-linetext-decoration-styletext-indenttext-justifytext-overflowtext-shadowtext-transformtoptransformtransform-origintransform-styletransitiontransition-delaytransition-durationtransition-propertytransition-timing-functionunicode-bidiuser-selectvertical-alignvisibilitywhite-spacewidthword-breakword-spacingword-wrapwriting-modez-index

CSS Tutorial

CSS HOMECSS IntroductionCSS SyntaxCSS SelectorsCSS How ToCSS CommentsCSS Colors Colors RGB HEX HSL

CSS Backgrounds Background Color Background Image Background Repeat Background Attachment Background Shorthand

CSS Borders Borders Border Width Border Color Border Sides Border Shorthand Rounded Borders

CSS Margins Margins Margin Collapse

CSS PaddingCSS Height/WidthCSS Box ModelCSS Outline Outline Outline Width Outline Color Outline Shorthand Outline Offset

CSS Text Text Color Text Alignment Text Decoration Text Transformation Text Spacing Text Shadow

CSS Fonts Font Family Font Style Font Size Font Google Font Shorthand

CSS IconsCSS LinksCSS ListsCSS TablesCSS DisplayCSS Max-widthCSS PositionCSS OverflowCSS Float Float Clear Float Examples

CSS Inline-blockCSS AlignCSS CombinatorsCSS Pseudo-classCSS Pseudo-elementCSS OpacityCSS Navigation Bar Navbar Vertical Navbar Horizontal Navbar

CSS DropdownsCSS Image GalleryCSS Image SpritesCSS Attr SelectorsCSS FormsCSS CountersCSS Website LayoutCSS UnitsCSS Specificity

Стиль границ

Свойство указывает, какие границы отображать на дисплее.

Значения которые разрешены:

  • — Определяет границу штрихом
  • — Определяет границу пунктиром
  • — Определяет границу сплошной
  • — Определяет границу двойной
  • — Определяет 3D границу желобом. Эффект зависит от значение border-color
  • — Определяет 3D границу коньком. Эффект зависит от значение border-color
  • — Определяет 3D границу вставкой. Эффект зависит от значение border-color
  • — Определяет 3D границу начальной. Эффект зависит от значение border-color
  • — Определяет без границ
  • — Определяет скрытые границы

Свойство может иметь от одного до четырех значений: по часовой стрелке: top (сверху), right (справа), bottom (снизу), left (слева).

Пример

p.dotted {border-style: dotted;} p.dashed {border-style: dashed;} p.solid {border-style: solid;} p.double {border-style: double;} p.groove {border-style: groove;} p.ridge {border-style: ridge;} p.inset {border-style: inset;} p.outset {border-style: outset;} p.none {border-style: none;} p.hidden {border-style: hidden;} p.mix {border-style: dotted dashed solid double;}

Результат:

Штрихованные границы.


Пунктирные границы.

Сплошные границы.

Двойные границы.

Границы желобом. Эффект зависит от значение border-color.

Границы коньком. Эффект зависит от значение border-color.

Границы вставкой. Эффект зависит от значение border-color.

Границы начальные. Эффект зависит от значение border-color.

Границ нет.

Границы скрыть.

Смешанные границы.

Примечание: Ни одно из свойств границ CSS описаны ниже не будут иметь никакого эффекта, если не установлено свойство !

Цвет границы таблицы через -> id

Цвет границы таблицы можно прописать через -> id, берем, весь код, что был приведен выше и заменяем класс на идентификатор!

Алгоритм окраски границ таблиц через идентификатор аналогичный предыдущему пункту, поэтому стразу соберем всю таблицу вместе! И изменим цвет границы на зеленый, чтобы чуть=чуть отличаться!

<style>table#tsvetnaya-granitsa { border-collapse: collapse; } #tsvetnaya-granitsa td{ border: solid; border-color: color:green } </style>

<table width=»500″ id=»tsvetnaya-granitsa»>

<tbody>

<tr>

<td>здесь текст</td>

<td>здесь текст</td>

</tr>

</tbody>

</table>

Результат вывода на экран таблицы с цветной границей таблицы через идентификатор:

здесь текст здесь текст

CSS Border — Individual Sides

From the examples on the previous pages, you have seen that it is possible to specify a different border for each side.

In CSS, there are also properties for specifying each of the borders (top, right, bottom, and left):

Example

p {   border-top-style: dotted;   border-right-style: solid;   border-bottom-style: dotted;   border-left-style: solid; }

Result:

Different Border Styles

The example above gives the same result as this:

Example

p {  border-style: dotted solid;}

So, here is how it works:

If the property has four values:

  • border-style: dotted solid double dashed;
    • top border is dotted
    • right border is solid
    • bottom border is double
    • left border is dashed

If the property has three values:

  • border-style: dotted solid double;
    • top border is dotted
    • right and left borders are solid
    • bottom border is double

If the property has two values:

  • border-style: dotted solid;
    • top and bottom borders are dotted
    • right and left borders are solid

If the property has one value:

  • border-style: dotted;

    all four borders are dotted

Example

/* Four values */p {  border-style: dotted solid double dashed; }/* Three values */p {  border-style: dotted solid double; }/* Two values */p {  border-style: dotted solid; }/* One value */p {  border-style: dotted; }

The property is used in the example above. However, it also works with and .

Скрыть наружную границу таблицы html

Ну и напоследок… бывает такая ситуация, что требуется скрыть наружные границы таблицы — как это сделать!?

Стили:

table {

width: 500px;

border-collapse: collapse;

border: 2px solid white;

}

td {

padding: 3px;

border: 1px solid ;

text-align: left;

}

Таблица:

<table>    <tr>     <td>страна\год</td><td>2016</td><td>2017</td><td>2018</td>    </tr>    <tr>     <td>Россия</td><td>43</td><td>51</td><td>79</td>    </tr>    <tr>     <td>Сша</td><td>28</td><td>34</td><td>48</td>    </tr>    <tr>     <td>Германия</td><td>29</td><td>57</td><td>36</td>    </tr> </table>

Результат:

страна\год 2016 2017 2018
Россия 43 51 79
Сша 28 34 48
Германия 29 57 36

С этим читают