HTML Table with Border

HTML тег

Заголовок строки или столбца таблицы задается при помощи тега . Тег размещается в первой строке таблицы. В браузере он автоматически выделяется жирным.

Тег

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

Содержание

Синтаксис
Пример
Результат
Атрибуты
Как добавить стиль к тегу ?
Распространенные свойства для изменения визуальной насыщенности/выделения/размера текста внутри тега :
Цвет текста внутри тега :
Стили форматирования текста для тега :
Другие свойства для тега :
Fonts in Tables
HTML 5 Tutorial: Table Example
HTML Table use for represent tabular data like in the Excel Application and arrange the layout of the Web View
Basic HTML Table
HTML Table with Border
HTML Table with Background Color
HTML Table with Cell Font Color
HTML Table Cell Padding
HTML Table Cell Alignment
HTML Table Merge Rows or Columns

Синтаксис

Тег

парный, содержимое записывается между открывающим (

) и закрывающим (

) тегами.

Пример

html> html> head> title>Заголовок документа title> head> body> table border="1" style="border-collapse:collapse;"> tr> th>Месяц th> th>Число th> tr> tr> td>Июнь td> td>10.06.2018 td> tr> tr> td>Июль td> td>15.07.2018 td> tr> table> body> html>

Результат

Атрибуты

Атрибут	Значение	Описание
align	left center right	Устанавливает выравнивание содержимого колонки. Не поддерживается в HTML5.
background	background	Задает фоновый рисунок в таблице. Не поддерживается в HTML5.
bgcolor	rgb(x,x,x) #xxxxxx colorname	Задает цвет фона таблицы. Не поддерживается в HTML 5.
border	1 0	Задает толщину рамки в пикселях. Не поддерживается в HTML 5.
cellpadding	pixels	Задает расстояние между границей ячейки и ее содержимым. Не поддерживается в HTML 5.
cellspacing	pixels	Задает расстояние между ячейками. Не поддерживается в HTML 5.
cols	cols	Задает число колонок в таблице. Не поддерживается в HTML 5.
frame	void above below hsides lhs rhs vsides box border	Указывает браузеру, как отображать границы вокруг таблицы. Не поддерживается в HTML 5.
height	height	Задает высоту таблицы.
rules	none groups rows cols all	Сообщает браузеру, где отображать границы между ячейками. Не поддерживается в HTML 5.
sortable	sortable	Указывает, что данные в таблице могут быть отсортированы. Это логический атрибут. Не поддерживается в спецификации HTML 5.1.
summary	text	Дает краткое описание таблицы. Не поддерживается в HTML 5.
width	pixels	Задает ширину таблицы. Не поддерживается в HTML 5.

Как добавить стиль к тегу ?

Распространенные свойства для изменения визуальной насыщенности/выделения/размера текста внутри тега :

CSS свойство font-style задает стиль шрифта: normal | italic | oblique | initial | inherit
CSS свойство font-family создает приоритетный список названий семейства шрифтов и/или общее имя шрифтов для выбранных элементов.
CSS свойство font-size задает размер щрифта.
CSS свойство font-weight устанавливает насыщенность шрифта.
CSS свойство text-transform задает регистр текста (заглавные или строчные буквы).
CSS свойство text-decoration устанавливает оформление текста. Оно является сокращенным свойством для text-decoration-line, text-decoration-color, text-decoration-style.

Цвет текста внутри тега :

Стили форматирования текста для тега :

CSS свойство text-indent указывает размер отступа первой строки в текстовом блоке.
CSS свойство text-overflow указывает, как будет отображаться пользователю строчный текст, выходящий за границы блока.
CSS свойство white-space указывает, как будут отображены пробелы внутри элемента.
CSS свойство word-break указывает перенос строки.

Другие свойства для тега :

CSS свойство text-shadow добавляет тень к тексту.
CSS свойство text-align-last выравнивает последнюю строку текста.
CSS свойство line-height устанавливает межстрочный интервал.
CSS свойство letter-spacing устанавливает расстояние между буквами/символами в тексте.
CSS свойство word-spacing устанавливает расстояние между словами в тексте.

Источник

Fonts in Tables

Of special interest to webmasters who do a lot of tables is the application of styles to tables. If you’ve ever attempted to use the tag in conjunction with tables you know how painful it can be. You have to put a complete tag inside every table cell, resulting in mountains of code. Perhaps you’ve written painful code like this:

BGCOLOR=NAVY>  fruit   state  
  apples   Washington  
  pineapples   Hawaii

fruit	state
apples	Washington
pineapples	Hawaii

If you’re in this situation, styles will make your life simpler.

Let’s look at an example. The following styles code (in a STYLE tag or in a style sheet file) creates a rule that applies to elements of the boldtable class, and also to and elements inside the boldtable class:

.boldtable, .boldtable TD, .boldtable TH

We can apply this style to an entire table by simply setting the class of the table to boldtable :

CLASS="boldtable"> fruit  state  
 apples  Washington  
 pineapples  Hawaii

which gives us this table:

fruit	state
apples	Washington
pineapples	Hawaii

The keen observer will notice that there’s some redundancy in the selector. After all, if we set the entire table to the boldtable class, then it should automatically apply to the and elements inside. That’s how it should work, but that’s where reality rears its ugly head. Netscape has a bug such that it doesn’t understand that the contents of table cells get the font styles applied to the table as a whole. However, it is able to apply the styles if and are mentioned explicitly.

Источник

HTML 5 Tutorial: Table Example

by Didin J. on Aug 04, 2019

HTML Table use for represent tabular data like in the Excel Application and arrange the layout of the Web View

HTML Table uses to represent tabular data like in the Excel Application and arrange the layout of the Web View. Here, we want to show you how to create a table using HTML tags and Stylesheet (CSS). HTML table may vary depends on data and style requirements. Sometimes, in the real application, we use an HTML table as a layout of the Email template in HTML format.

There are some common HTML tags that use by HTML table:

HTML Tags	Descriptions
	Define a table
	Define a table row
	Define a table cell
	Define a table header cell
	Define a group of a table header
	Define a group of a table body
	Define a group of a table footer

Basic HTML Table

Here is an example of a basic HTML table or common use of the above HTML tags to define or create a table.

  No.  Full Name  Position  Salary  
 1  Bill Gates  Founder Microsoft  $1000  
 2  Steve Jobs  Founder Apple  $1200  
 3  Larry Page  Founder Google  $1100  
 4  Mark Zuckeberg  Founder Facebook  $1300

No.	Full Name	Position	Salary
1	Bill Gates	Founder Microsoft	$1000
2	Steve Jobs	Founder Apple	$1200
3	Larry Page	Founder Google	$1100
4	Mark Zuckeberg	Founder Facebook	$1300

As a default, HTML 5 table not defined with border, you should add the border manually in each table cells.

HTML Table with Border

  No.  Full Name  Position  Salary  
 1  Bill Gates  Founder Microsoft  $1000  
 2  Steve Jobs  Founder Apple  $1200  
 3  Larry Page  Founder Google  $1100  
 4  Mark Zuckeberg  Founder Facebook  $1300

No.	Full Name	Position	Salary
1	Bill Gates	Founder Microsoft	$1000
2	Steve Jobs	Founder Apple	$1200
3	Larry Page	Founder Google	$1100
4	Mark Zuckeberg	Founder Facebook	$1300

If you want a simple coding without writing a style for each cells, use tag before tag. So, the full source codes will be like this.

    table < border: solid 1px #aaa999; >table tr th < border: solid 1px #aaa999; >table tr td   No.  Full Name  Position  Salary  
 1  Bill Gates  Founder Microsoft  $1000  
 2  Steve Jobs  Founder Apple  $1200  
 3  Larry Page  Founder Google  $1100  
 4  Mark Zuckeberg  Founder Facebook  $1300

No.	Full Name	Position	Salary
1	Bill Gates	Founder Microsoft	$1000
2	Steve Jobs	Founder Apple	$1200
3	Larry Page	Founder Google	$1100
4	Mark Zuckeberg	Founder Facebook	$1300

Next, we will always use separate tag for another HTML 5 Table example instead of inline style.

Now, the table border looks ugly. That because of default HTML 5 table has a spacing for border cells. To fix that, add this style code to the table.

HTML Table with Background Color

To add a background color to the HTML 5 table, simply add this style code to table style.

Or you can apply the 6-digit hexadecimal code starting with `#` symbol.

To make different color for header and body, add style code to style.

To make striped or zebra-like table background color for data rows, add this style to tr style.

That style code will give background color to table row begin with blue color by using `even` keyword. If you want table row background color begins with table background color use `odd` keyword.

If we are using both even and odd keyword, we use different background color on each even and odd rows instead of using the table background color.

tr:nth-child(even) < background-color: #0000FF; >tr:nth-child(odd)

HTML Table with Cell Font Color

HTML Table Cell Padding

The previous HTML 5 table example shows too narrow table view. Now, we will adjust the table vertical and horizontal cell padding. Add this new style codes for that.

HTML Table Cell Alignment

Some column cells need a different text alignment. For example, we want to center alignment first column cells. To do that, add this new style codes.

To align all columns add this style code.

To align the last column of the table use this style code.

HTML Table Merge Rows or Columns

To merge few HTML 5 table rows using these attributes.

  No.  Full Name  Position  Salary  Type  
 1  Bill Gates  Founder Microsoft  $1000  Company Founder  
 2  Steve Jobs  Founder Apple  $1200  
 3  Larry Page  Founder Google  $1100  
 4  Mark Zuckeberg  Founder Facebook  $1300

No.	Full Name	Position	Salary	Type
1	Bill Gates	Founder Microsoft	$1000	Company Founder
2	Steve Jobs	Founder Apple	$1200
3	Larry Page	Founder Google	$1100
4	Mark Zuckeberg	Founder Facebook	$1300

To merge HTML 5 table columns use this attribute.

  No.  Full Name  Position  Salary  Type  
 1  Bill Gates  Founder Microsoft  $1000  Company Founder  
 2  Steve Jobs  Founder Apple  $1200  
 3  Larry Page  Founder Google  $1100  
 4  Mark Zuckeberg  Founder Facebook  $1300  
 Total Expense:  $4600

No.	Full Name	Position	Salary	Type
1	Bill Gates	Founder Microsoft	$1000	Company Founder
2	Steve Jobs	Founder Apple	$1200
3	Larry Page	Founder Google	$1100
4	Mark Zuckeberg	Founder Facebook	$1300
Total Expense:	$4600

That it’s for now. You can find all off above examples in our GitHub.

Источник