Таблицы в html: Красивое оформление таблиц

Содержание

Красивое оформление таблиц

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

Перейти на страницу с примерами

1. Таблица с раздельными строками

Таблицы с промежутками между строк помогают сконцентрироваться на связанной информации, расположенной в этой же строке таблицы, но в соседних ячейках. Для того, чтобы отделить текст от картинки, помещаем его в другую ячейку, объединив при этом две ячейки в заголовке таблицы (<th colspan="2">Модель</th>), а правую границу между ячейками убираем.

<table>
<tr>
  <th colspan="2">Модель</th>
  <th>Цена</th>
  <th>Количество</th>
  <th>Итого</th>
</tr>
<tr>
  <td><img src="https://html5book.ru/wp-content/uploads/2015/04/dress-2.png"></td>
  <td>Платье с цветочным принтом</td>
  <td>2500</td>
  <td>1</td>
  <td>2500</td>
</tr>
<tr>
  <td><img src="https://html5book.ru/wp-content/uploads/2015/04/dress-3.png"></td>
  <td>Платье с боковыми вставками</td>
  <td>3000</td>
  <td>1</td>
  <td>3000</td>
</tr>
</table>
table {
border-spacing: 0 10px;
font-family: 'Open Sans', sans-serif;
font-weight: bold;
}
th {
padding: 10px 20px;
background: #56433D;
color: #F9C941;
border-right: 2px solid; 
font-size: 0.9em;
}
th:first-child {
text-align: left;
}
th:last-child {
border-right: none;
}
td {
vertical-align: middle;
padding: 10px;
font-size: 14px;
text-align: center;
border-top: 2px solid #56433D;
border-bottom: 2px solid #56433D;
border-right: 2px solid #56433D;
}
td:first-child {
border-left: 2px solid #56433D;
border-right: none;
}
td:nth-child(2){
text-align: left;
}

2. Цветная таблица

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

<table>
<tr>
  <th>Company</th>
  <th>Q1</th>
  <th>Q2</th>
  <th>Q3</th>
  <th>Q4</th>
  </tr>
 <tr>
  <td>Microsoft</td>
  <td>20.3</td>
  <td>30.5</td>
  <td>23.5</td>
  <td>40.3</td>
 </tr>
<tr>
  <td>Google</td>
  <td>50.2</td>
  <td>40.63</td>
  <td>45.23</td>
  <td>39.3</td>
</tr>
<tr>
  <td>Apple</td>
  <td>25.4</td>
  <td>30.2</td>
  <td>33.3</td>
  <td>36.7</td>
</tr>
<tr>
  <td>IBM</td>
  <td>20.4</td>
  <td>15.6</td>
  <td>22.3</td>
  <td>29.3</td>
</tr>
</table>
table {
font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
font-size: 14px;
border-collapse: collapse;
text-align: center;
}
th, td:first-child {
background: #AFCDE7;
color: white;
padding: 10px 20px;
}
th, td {
border-style: solid;
border-width: 0 1px 1px 0;
border-color: white;
}
td {
background: #D8E6F3;
}
th:first-child, td:first-child {
text-align: left;
}

3. Таблица с закругленными углами

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

Разметка HTML аналогично с примером 2.

table {
font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
font-size: 14px;
border-radius: 10px;
border-spacing: 0;
text-align: center;
}
th {
background: #BCEBDD;
color: white;
text-shadow: 0 1px 1px #2D2020;
padding: 10px 20px;
}
th, td {
border-style: solid;
border-width: 0 1px 1px 0;
border-color: white;
}
th:first-child, td:first-child {
text-align: left;
}
th:first-child {
border-top-left-radius: 10px;
}
th:last-child {
border-top-right-radius: 10px;
border-right: none;
}
td {
padding: 10px 20px;
background: #F8E391;
}
tr:last-child td:first-child {
border-radius: 0 0 0 10px;
}
tr:last-child td:last-child {
border-radius: 0 0 10px 0;
}
tr td:last-child {
border-right: none;
}

4. Таблица с раздельными ячейками

Разметка HTML аналогично с примером 2.

table {
font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
text-align: left;
border-collapse: separate;
border-spacing: 5px;
background: #ECE9E0;
color: #656665;
border: 16px solid #ECE9E0;
border-radius: 20px;
}
th {
font-

Таблицы в HTML | HTML/xHTML

CompanyContactCountry
Alfreds FutterkisteMaria AndersGermany
Centro comercial MoctezumaFrancisco ChangMexico
Ernst HandelRoland MendelAustria
Island TradingHelen BennettUK
Laughing Bacchus WinecellarsYoshi TannamuriCanada
Magazzini Alimentari RiunitiGiovanni RovelliItaly

Посмотреть пример

Таблица определяется с помощью тега <table>. Каждая строка таблицы определяется с помощью HTML tr. Заголовок таблицы определяется с помощью тега <th>. По умолчанию заголовки выделяются жирным шрифтом и выравниваются по центру. Ячейка таблица определяется с помощью тега <td>.

Пример:

<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>

Посмотреть пример

Примечание: Элементы <td> являются контейнерами данных таблицы. Они могут содержать HTML-элементы, текст, изображения, списки, другие таблицы и т.д.

Рамка задается с помощью свойства CSS border:

Пример:

table, th, td {
    border: 1px solid black;
}

Посмотреть пример

Не забудьте задать рамку и для самой таблицы, и для ячеек.

Если хотите объединить рамки всех HTML table tr в одну, используйте свойство CSS border-collapse:

Пример:

table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
}

Посмотреть пример

Поля ячейки задают пространство между содержимым ячейки и ее рамкой. Чтобы установить поля, используйте свойство padding:

Пример:

th, td {
    padding: 15px;
}

Посмотреть пример

По умолчанию заголовки табл

HTML5 | Таблицы

Таблицы

Последнее обновление: 08.04.2016

Для создания таблиц в html используется элемент table. Каждая таблица между тегами <table> и </table> содержит строки, который представлены элементом tr. А каждая строка между тегами <tr> и </tr> содержит ячейки в виде элементов td.

Создадим простейшую таблицу:


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Таблицы в HTML5</title>
	</head>
	<body>
		<table>
			<tr>
				<td>Модель</td> <td>Компания</td> <td>Цена</td>
			</tr>
			<tr>
				<td>Nexus 6P</td> <td>Huawei</td> <td>49000</td>
			</tr>
			<tr>
				<td>iPhone 6S PLus</td> <td>Apple</td> <td>62000</td>
			</tr>
			<tr>
				<td>Lumia 950 XL</td> <td>Microsoft</td> <td>35000</td>
			</tr>
		</table>
	</body>
</html>

Здесь у нас в таблице 4 строки, и каждая строка имеет по три столбца.

При этом в данном случае первая строка выполняет роль заголовка, а остальные три строки собственно являются содержимым таблицы. Разделения заголовков, футера и тела таблицы в html предусмотрены соответственно элементы thead, tfoot и tbody. Для их применения изменим таблицу следующим образом:


<table>
	<caption><b>Популярные смартфоны 2015</b></caption>
	<thead>
		<tr>
			<th>Модель</th> <th>Компания</th> <th>Цена</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>Nexus 6P</td> <td>Huawei</td> <td>49000</td>
		</tr>
		<tr>
			<td>iPhone 6S PLus</td> <td>Apple</td> <td>62000</td>
		</tr>
		<tr>
			<td>Lumia 950 XL</td> <td>Microsoft</td> <td>35000</td>
		</tr>
	<tbody>
	<tfoot>
		<tr>
			<th colspan="3">Информация по состоянию на 17 марта</th>
		</tr>
	</tfoot>
</table>

В элемент thead заключается строка заголовков. Для ячеек заголовок используется не элемент td, а th. Элемент th выделяет заголовок жирным. А все остальные строки заключаются в tbody

Элемент tfoot определяет подвал таблицы или футер. Здесь обычно выводится некоторая вспомогательная информация по отношению к таблице.

Кроме собственно заголовоков столбцов с помощью элемента caption мы можем задать общий заголовок для таблицы.

Также стоит отметить, что футер таблицы содержит только один столбец, который раздвигается по ширине трех столбцов с помощью атрибута colspan="3".

Атрибут colspan указывает на какое количество столбцов раздвигается данная ячейка. Также с помощью атрибута rowspan мы можем раздвигать ячейку на определенное количество строк. Например:


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Таблицы в HTML5</title>
		<style>
			td{
				width: 60px; 
				height:60px; 
				border: solid 1px silver; 
				text-align:center;
			}
		</style>
	</head>
	<body>
		<table>
			<tr>
				<td rowspan="2">1</td>
				<td>2</td>
				<td>3</td>
			</tr>
			<tr>
				<td>4</td>
				<td>5</td>
			</tr>
			<tr>
				<td>6</td>
				<td colspan="2">7</td>
			</tr>
		</table>
	</body>
</html>

Урок 10: Таблицыrustutorial - HTML.net

Таблицы используются, когда вам необходимо показать "табличные данные", например, информацию, логически упорядоченную в столбцы и ряды.

Это трудно?

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

Пример 1:


			   <table>
				 <tr>
				   <td>Cell 1</td>
				   <td>Cell 2</td>
				 </tr>
				 <tr>
				   <td>Cell 3</td>
				   <td>Cell 4</td>
				 </tr>
			   </table>
	
	

будет выглядеть в браузере:

Cell 1 Cell 2
Cell 3 Cell 4

Какая разница между <tr> и <td>?

Как видно из приведённого примера, это, возможно, самый сложный из примеров HTML, которые мы вам давали до сих пор. Давайте здесь остановимся и сделаем пояснения:

Для вставки таблиц используются 3 базовых тэга:

  • <table> - начало и конец таблицы. Логично.
  • <tr>  - "table row/ряд таблицы", начинает и заканчивает горизонтальный ряд ячеек. Тоже логично.
  • <td>  - сокращение от "table data/табличные данные". Этот тэг начинает и заканчивает каждую ячейку ряда таблицы. Всё просто и логично.

Вот что происходит в Примере 1: таблица начинается с <table>, затем идёт <tr>, указывающий на начало нового ряда. В ряду вставлены две ячейки: <td>Cell 1</td> и <td>Cell 2</td>. Ряд закрывается </tr>, и сразу начинается новый ряд <tr>. В новом ряду также две ячейки. Таблица закрывается </table>.

Чтобы было ещё понятнее: ряды это горизонтальные строки ячеек, а столбцы - вертикальные столбцы ячеек:

Cell 1 Cell 2
Cell 3 Cell 4

Cell 1 и Cell 2 образуют ряд. Cell 1 и Cell 3 образуют столбец.

В вышеприведённом примере в таблице имеются два ряда и два столбца. Но в таблице может быть неограниченное число рядов и столбцов.

Пример 2:


			   <table>
				 <tr>
				   <td>Cell 1</td>
				   <td>Cell 2</td>
				   <td>Cell 3</td>
				   <td>Cell 4</td>
				 </tr>
				 <tr>
				   <td>Cell 5</td>
				   <td>Cell 6</td>
				   <td>Cell 7</td>
				   <td>Cell 8</td>
				 </tr>
				 <tr>           
				   <td>Cell 9</td>
				   <td>Cell 10</td>
				   <td>Cell 11</td>
				   <td>Cell 12</td>
				 </tr>
			   </table>
	
	

будет выглядеть в браузере:

Cell 1 Cell 2 Cell 3 Cell 4
Cell 5 Cell 6 Cell 7 Cell 8
Cell 9 Cell 10 Cell 11 Cell 12

Есть ещё какие-нибудь атрибуты?

Разумеется. Например, атрибут border используется для специфицирования толщины рамки вокруг таблицы:

Пример 3:


			   <table border="1">
				 <tr>
				   <td>Cell 1</td>
				   <td>Cell 2</td>
				 </tr>
				 <tr>
				   <td>Cell 3</td>
				   <td>Cell 4</td>
				 </tr>
			   </table>
	
	

будет выглядеть в браузере:

Cell 1 Cell 2
Cell 3 Cell 4

Толщина рамки специфицируется в пикселах (См. Урок 9)

Как и с изображениями, вы можете указывать размер таблицы в пикселах или в процентах от размера экрана:

Пример 4:


			   <table border="1">
	
	

Этот пример будет отображён в браузере как таблица шириной в 30% экрана. Проверьте сами.

Ещё атрибуты?

У таблиц есть много атрибутов. Вот ещё два:

  • align: специфицирует выравнивание содержимого всей таблицы по горизонтали, в ряду или в отдельной ячейке. Например, left, center или right.
  • valign: специфицирует выравнивание по вертикали в ячейке. Например, top, middle или bottom.

Пример 5:


			   <td align="right" valign="top">Cell 1</td>
	
	

Что можно вставлять в таблицы?

Теоретически - всё: текст, ссылки и изображения... НО таблицы предназначаются для вывода табличных данных (т. е. данных, которые изначально представляются в виде столбцов и рядов), поэтому избегайте вставки данных в таблицы только потому, что вы хотите разместить их рядом друг с другом.

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

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



<< Урок 9: Изображения

Урок 11: Ещё о таблицах >>

HTML таблица, заголовок таблицы, ширина ячейки

 

 

HTML ширина ячейки таблицы и ее высота (размер ячеек)

HTML высота ячеек и их ширина, размер определяется следующими атрибутами:

<html>
<head>
<title>Пример таблицы: HTML высота ячейки и ее ширина, размеры ячеек</title>
</head>
<body>
<table border="1" cellspacing="0" cellpadding="12">
<tr>
<td>ячейка 1, первый ряд</td>
<td>ячейка 2, первый ряд</td>
</tr>
<tr>
<td>ячейка 1, второй ряд</td>
<td>ячейка 2, второй ряд</td>
</tr>
</table> 
</body>
</html>

Результат:

ячейка 1, первый ряд

ячейка 2, первый ряд

ячейка 1, второй ряд

ячейка 2, второй ряд

Были установлены размеры первой ячейки из первого ряда. В итоге вторая ячейка, этого же ряда унаследовала высоту первой, а первая ячейка, второгo ряда — ее ширину (ширину первой ячейки, первого ряда). Такова особенность взаимодействия элементов HTML таблицы.

 

Горизонтальное HTML выравнивание в таблице и в ячейке, текст

HTML выравнивание внутри таблицы. Текст слева, справа, по центру ячеек таблицы:

<html>
<head>
<title>Пример: текст в таблице, HTML выравнивание в ячейке</title>
</head>
<body>
<table border="1" cellspacing="0" cellpadding="17">
<tr>
<td align="left">ячейка 1</td>
<td align="right">ячейка 2</td>
<td align="center">ячейка 3</td>
</tr>
</table> 
</body>
</html>

Результат:

ячейка 1

ячейка 2

ячейка 3

 

Вертикальное выравнивание текста внутри HTML таблицы

HTML выравнивание в таблице. Текст вверху, внизу, по центру ячеек таблицы:

<html>
<head>
<title>Пример: текст в таблице, HTML выравнивание в ячейке</title>
</head>
<body>
<table border="1" cellspacing="0" cellpadding="17">
<tr>
<td valign="top">ячейка 1</td>
<td valign="bottom">ячейка 2</td>
<td valign="middle">ячейка 3</td>
</tr>
</table> 
</body>
</html>

Результат:

ячейка 1

ячейка 2

ячейка 3

Атрибут valign определяет вертикальное выравнивание текста внутри таблицы.

 

Теги, определяющие заголовок HTML таблицы

HTML заголовки таблицы:

<html>
<head>
<title>Примеры заголовков</title>
</head>
<body>
<table border="1" cellspacing="0" cellpadding="10">
<tr>
<th>Заголовок</th>
<th>Заголовок</th>
<th>Заголовок</th>
</tr>
<tr>
<td>Текст</td>
<td>Текст</td>
<td>Текст</td>
</tr>
<tr>
<td>Текст</td>
<td>Текст</td>
<td>Текст</td>
</tr>
</table> 
</body>
</html>

Результат:

Заголовок

Заголовок

Заголовок

Текст

Текст

Текст

Текст

Текст

Текст

Теги <th> </th> определяют заголовок HTML таблицы.

 

HTML таблица по центру, с левой, с правой стороны

Горизонтальное расположение HTML таблицы внутри web-страницы:

<html>
<head>
<title>Примеры HTML таблиц</title>
</head>
<body>
<table align="center" bgcolor="#006699">
<tr>
<td>
<p>align="center"</p>
</td>
</tr>
</table>
   <table align="left" bgcolor="#cc0000">
   <tr>
   <td>
   <p>align="left"</p>
   </td>
   </tr>
   </table>
<table align="right" bgcolor="#66cc66">
<tr>
<td>
<p>align="right"</p>
</td>
</tr>
</table>
</body>
</html>

Результат: HTML таблица по центру страницы, слева, справа

В примере выше показаны три отдельные таблицы, каждая из которых состоит из одной ячейки.bgcolor – HTML атрибут – определяет цвет фона. В предыдущем уроке мы использовали его CSSаналог – background-color.

 

HTML таблица расположена внутри ячейки

Пример:

<html>
<head>
<title>Примеры HTML таблицы</title>
</head>
<body>
<table border="1" cellspacing="0" bgcolor="#cccccc">
<tr>
<td> &nbsp; </td>
<td align="center">
    <table border="1" cellspacing="5">
    <tr>
    <td> &nbsp; </td>
    <td> &nbsp; </td>
    </tr>
    <tr>
    <td> &nbsp; </td>
    <td> &nbsp; </td>
    </tr>
    </table>
</td>
</tr>
</table> 
</body>
</html>

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

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

Размеры и фон внутренней таблицы, в отличае от внешней, заданы с помошью CSS.

Добавить комментарий

Тег таблицы HTML


Пример

Простая таблица HTML, содержащая два столбца и две строки:

<таблица>

Месяц
Экономия


Январь
г. 100

Попробуй сам "

Дополнительные примеры "Попробуйте сами" ниже.


Определение и использование

Тег

определяет таблицу HTML.

Таблица HTML состоит из одного элемента

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


Поддержка браузера

и .

Элемент

определяет заголовок таблицы, а Элемент определяет ячейку таблицы.

Таблица HTML может также включать

,
Элемент
<таблица> Есть Есть Есть Есть Есть

Глобальные атрибуты

Тег

также поддерживает глобальные атрибуты в HTML.


Атрибуты событий

Тег

также поддерживает атрибуты событий в HTML.



Другие примеры

Пример

Как добавить свернутые границы в таблицу (с помощью CSS):




table, th, td {
border: 1px сплошной черный;
граница-коллапс: коллапс;
}

<таблица>













Месяц Экономия
январь 100
февраль 80 долларов


Попробуй сам "

Пример

Как выровнять таблицу по правому краю (с помощью CSS):

<таблица>

Месяц
Экономия


январь
100


февраль
80 долларов

Попробуй сам "

Пример

Как выровнять таблицу по центру (с помощью CSS):




table, th, td {
border: 1px сплошной черный;
}
стол.по центру {
маржа слева: авто;
маржа-право: авто;
}

<таблица >

Месяц
Экономия


январь
100


февраль
80 долларов

Попробуй сам "

Пример

Как добавить цвет фона в таблицу (с помощью CSS):

<таблица>

Месяц
Экономия


январь
100


февраль
80 долларов

Попробуй сам "

Пример

Как добавить отступ в таблицу (с помощью CSS):




table, th, td {
border: 1px сплошной черный;
}

th, td {
padding: 10px;
}















Месяц Экономия
январь 100
февраль 80 долларов



Попробуй сам "

Пример

Как установить ширину таблицы (с помощью CSS):

<таблица>

Месяц
Экономия


январь
100


февраль
80 долларов

Попробуй сам "

Пример

Как создавать заголовки таблиц:












Имя Электронная почта Телефон
Джон Доу джон[email protected] 123-45-678

Попробуй сам "

Пример

Как создать таблицу с подписью:

<таблица>
Ежемесячная экономия

Месяц
Экономия


январь
100


февраль
80 долларов

Попробуй сам "

Пример

Как определить ячейки таблицы, которые охватывают более одной строки или одного столбца:













Имя Электронная почта Телефон
Джон Доу джон[email protected] 123-45-678 212-00-546

Попробуй сам "

связанные страницы

Учебное пособие по HTML: таблицы HTML

Ссылка на HTML DOM: объект таблицы

Учебник CSS: таблицы стилей


Настройки CSS по умолчанию

Большинство браузеров будут отображать элемент

со следующими значениями по умолчанию:

Пример

стол {
дисплей: стол;
бордюр-обвал: раздельный;
border-spacing: 2px;
цвет границы: серый;
}

Попробуй сам "

Граница таблицы в HTML | 10 способов определения границы таблицы с примерами

Введение в границу таблицы в HTML

Граница таблицы в HTML используется для отображения границы вокруг содержимого таблицы.Это можно установить вокруг таблицы, указав такие значения, как 0, чтобы граница не отображалась вокруг ячеек таблицы, тогда как значение 1 установлено для отображения границы вокруг ячеек таблицы. Ширина таблицы может быть задана числовыми значениями, чтобы определить, сколько толстой границы пользователи хотят дать вокруг своей таблицы. Можно установить границу как для всей таблицы, так и для отдельной строки или столбца или только для заголовка таблицы, все возможно.

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

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

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

Пример:

table, th, td {
border: 1px сплошной синий;
}

2. Сворачиваемая граница таблицы: Это свойство используется для установки сворачиваемой границы в одну строку вокруг нашей таблицы с помощью свойства border-collapse.

таблица {
border-collapse: collapse;
}

Пример:

таблица {
border-collapse: collapse;
}
таблица, th, td {
border: 0px;
}

3.Граница вокруг таблицы: Это свойство позволяет нам добавлять границу таблицы только по внешним краям, а не к каждой отдельной ячейке таблицы, просто как:

таблица {
border: 1px;
}

4. Пунктирная граница таблицы: можно просто добавить пунктирный контур в качестве границы своей таблицы, просто используя следующий синтаксис:

таблица {
border: 1px; пунктирное название цвета;
}

5. Пунктирная граница таблицы: Как и пунктирная линия, мы можем установить пунктирную границу вокруг нашей таблицы или ячеек таблицы.Он может быть тонким или толстым по выбору пользователя путем установки значения.

таблица {
граница: 3 пикселя; пунктирное название цвета;
}

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

таблица {
border: 1px; двойное название цвета;
}

7. Граница таблицы вокруг ячеек таблицы: Этот синтаксис помогает нам задать границу вокруг отдельных ячеек или любой конкретной ячейки таблицы с вашим любимым цветовым кодом.В этом синтаксисе мы хотим добавить значение кода границы для каждой ячейки отдельно.

таблица {
border: 1px; пунктирное название цвета;
}
-е {
граница: 1 пиксель; название цвета;
}
td {
border: 2px; название цвета;
}

8. Граница таблицы с классами CSS: Вместо того, чтобы устанавливать границу для каждой отдельной ячейки таблицы, классы CSS помогают нам задать общий код границы для нашей таблицы. Это можно сделать, используя следующий синтаксис:

<стиль>
таблица {
background-color: color-name;
}
таблица th {
код CSS
}
таблица td {
код CSS
}

9.Нижняя граница таблицы: Это свойство границы таблицы используется для создания горизонтальных разделителей между тегами th и td таблицы следующим образом:

th, td {
border-bottom: value-name;
}

10. Закругленная граница таблицы : Скругленные углы будут отображаться на границе таблицы.

таблица {
border-radius: value;
граница: значение имя-цвета;
}

Примеры границы таблицы в HTML

Ниже приведены примеры границы таблицы

.
Пример # 1

В следующем примере показаны две разные таблицы с разными границами.Первая таблица показывает нормальную рамку вокруг таблицы, тогда как вторая таблица является примером формата границы сворачиваемой таблицы

.

HTML код:












































Genral Table Border
SR.НЕТ НАЗВАНИЕ Образование AGE
1 Динеш BCA 26
2 Радж CA 30
3 Deepti ME 28
4 Ахилеш Б.com 21
5 Сара MBA 26



























< / tr>












Сворачиваемая граница таблицы
Emp Code Emp Name Должность Заработная плата (LPA)
911 Зоя Шайх Разработчик 3.6
912 Lisa Dev Tester 2.8
913 Deepak Jadeja Цифровой маркетинг 5.2
914 Aditi Yewale Разработчик 4
915 Симрен Рао HR 5.6


Выход:

Пример # 2

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

HTML код:





Таблица с внешней границей






















Index Seasons Продолжительность
1 Лето 4 месяца
2 Сезоны дождей 4 месяца
3 Зима 4 месяца

Таблица с пунктирной рамкой






















Индекс Сезоны Продолжительность
1 Лето 4 месяца
2 Сезон дождей 4 месяца
3 Зима 4 месяца

Таблица с пунктирной рамкой

















< td> 3



Индекс S easons Продолжительность
1 Лето 4 месяца
2 Сезоны дождей 4 месяца
Зима 4 месяца

Таблица с двойной рамкой

< table>

Index
Seasons
Durations


1
Лето
4 месяца


2
Сезон дождей
< td> 4 месяца


3
Зима
4 месяца


Вывод: Этот вывод показывает таблицу с пунктирной, пунктирной и двойной рамкой за пределами таблицы.

Пример # 3

Пример, показывающий ячейки таблицы, окаймленные разным цветом индивидуально:

HTML код: