Веб-типографика: создаем таблицы для чтения, а не для красоты

Содержание:

CSS Advanced
Перезагрузка из командной строки. Перезагрузка компьютера из командной строки Windows
Отображение границ вокруг ячеек таблицы
Fixed Header Table by Colorlib
Pricing Tables
Table With Vertical & Horizontal Highlight by Colorlib
Property Values
Ширина таблицы
Responsive Table V1 by Colorlib
Какую программу выбрать для проверки скорости sd карты
Как создать таблицу CSS
Столбцы и их группировка
CSS Reference
CSS Properties
Есть ключевое различие
Чередование фонового цвета строк таблицы
More Examples
Tables

CSS Advanced

CSS Rounded CornersCSS Border ImagesCSS BackgroundsCSS ColorsCSS Gradients
Linear Gradients
Radial Gradients

CSS Shadows
Shadow Effects
Box Shadow

CSS Text EffectsCSS Web FontsCSS 2D TransformsCSS 3D TransformsCSS TransitionsCSS AnimationsCSS TooltipsCSS Style ImagesCSS object-fitCSS ButtonsCSS PaginationCSS Multiple ColumnsCSS User InterfaceCSS Variables
The var() Function
Overriding Variables
Variables and JavaScript
Variables in Media Queries

CSS Box SizingCSS Media QueriesCSS MQ ExamplesCSS Flexbox
CSS Flexbox
CSS Flex Container
CSS Flex Items
CSS Flex Responsive

Перезагрузка из командной строки. Перезагрузка компьютера из командной строки Windows

Наклонный текст html тег i курсив примеры

Отображение границ вокруг ячеек таблицы

Nth-child и nth-of-type

Вы можете сказать: — так, мы убрали промежуток между ячейками, используя свойство border-spacing со значением , но почему у нас теперь границы у ячеек то пересекаются?

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

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

Рассмотрим сравнение поведения границ при использовании свойства border-spacing со значением и свойства border-collapse со значением collapse:

<!DOCTYPE html>
<html>
<head>
<title>Пример отображения границ вокруг ячеек таблицы</title>
<style> 
table {
float: left; /* таблицы становятся плавающими элементами, смещенными по левому краю */
margin-right: 30px; /* устанавливаем внешние отступы справа */
}
td, th {
border: 5px solid #F50; /* задаем сплошную границу размером 5 пикселей цвета #F50 */
width: 50px; /* ширина ячеек */
height: 75px; /* высота ячеек */
}
caption {
font-weight: bold; /* жирное начертание */
}
.first {
border-spacing: ; /* промежуток между ячейками таблицы отсутствует */
}
.second {
border-collapse: collapse; /* объединяем границы ячеек в одну */	  
}
</style>
</head>
	<body>
		<table class = "first">
			<caption>border-spacing: 0;</caption>
			<tr>
				<th>1</th><th>2</th><th>3</th>
			</tr>
			<tr>
				<td>2</td><td></td><td></td>
			</tr>
			<tr>
				<td>3</td><td></td><td></td>
			</tr>
		</table>
		<table class = "second">
			<caption>border-collapse: collapse;</caption>
			<tr>
				<th>1</th><th>2</th><th>3</th>
			</tr>
			<tr>
				<td>2</td><td></td><td></td>
			</tr>
			<tr>
				<td>3</td><td></td><td></td>
			</tr>
		</table>
	</body>
</html>

В данном примере мы:

Сделали наши таблицы плавающими и сместили по левому краю (float: left), установили для них внешний отступ справа равный 30px.
Установили для наименования таблицы (тег <caption>) – жирное начертание.
Для ячеек таблицы (заголовочные и ячейки данных) мы установили сплошную границу размером 5 пикселей шестнадцатеричным цветом #F50 и установили фиксированную ширину 50px и высоту 75 пикселей.
Для первой таблицы с классом .first мы установили промежуток между ячейками таблицы равный нулю (border-spacing: ;), а для второй таблицы с классом .second установили свойство border-collapse со значением collapse, которое объединяет границы ячеек в одну, когда это возможно.

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

Рис. 146 Пример отображения границ вокруг ячеек таблицы.

Свойство border-collapse имеет всего два значения для отображения границ вокруг ячеек таблицы:

Значение	Описание
separate	Отдельно стоящие границы (свойства border-spacing и empty-cells не будут игнорироваться). Это значение по умолчанию.
collapse	Границы объединяются в одну, когда это возможно (свойства border-spacing и empty-cells игнорируются).

Обратите внимание, что когда мы используем свойство border-collapse со значением collapse такие свойства как border-spacing и empty-cells игнорируются (не употребляйте их одновременно)! Стоп, а что за empty-cells?

Fixed Header Table by Colorlib

Html таблицы

These table variations are also created by Colorlib. In this case, we have added a fixed top row for each table that remains in place on the scroll. You can further tweak this idea to get the results you were looking for. In other words, if you would like to brand any of the two table designs, please do. You can change the color and make them follow your regulations precisely. Needless to say, these support an array of different aims and intentions, making sure they cater to a variety of different purposes. Create a timetable for your classes or share other information; anything is possible.

DownloadPreview

Pricing Tables

francescomansi
September 19, 2019

HTML / CSS

Tailwind CSS Pricing Panel Responsive

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: tailwind.css

Aris Kuckovic
April 27, 2019

HTML / CSS (SCSS)

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: —

Florin Pop
February 25, 2019

HTML / CSS

About the code

Pricing Plans

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: —

Paulo Ribeiro
October 27, 2018

HTML / CSS (SCSS)

About the code

Pure CSS pricing table.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: —

Jamal Hassonui
February 14, 2018

About the code

Simple pricing table.

Chouaib Blgn
September 16, 2017

HTML
CSS/SCSS

About the code

Pricing table with animation.

About the code

Pricing table comparing 3 different plans for a mystical computing company.

Demo Image: HTML And CSS Pricing Table

Bootstrap pricing table.
Made by Sahar Ali Raza
December 10, 2016

download
demo and code

Demo Image: Adaptive Pricing Table

HTML/CSS adaptive pricing table.
Made by Alex
July 31, 2016

download
demo and code

Demo GIF: Price Table

Price Table

Price table with HTML and CSS.
Made by Matthias Martin
April 7, 2016

download
demo and code

Demo Image: Material Pricing Tables

Material responsive pricing tables in HTML and CSS.
Made by Kreso Galic
January 14, 2016

download
demo and code

Demo Image: Pricing Table

Pricing table with HTML and CSS.
Made by Mike Torosian
February 25, 2015

download
demo and code

Demo Image: Responsive Flip Pricing Table

Responsive flip pricing table to view month or year price.
Made by Shane Heyns
January 12, 2015

download
demo and code

Demo Image: Pricing Tables

Simple pricing tables.
Made by Joseph Victory
February 15, 2014

download
demo and code

Demo Image: Pricing Table

download
demo and code

Table With Vertical & Horizontal Highlight by Colorlib

These HTML5 & CSS3 tables come with highlights for both vertical and horizontal rows. We made sure to have several different variations, so you can choose the one that works the best for you. Instead of one, you get a whopping collection of six nifty alternatives completely free of charge. You just hit the download button and you can already start using these tables with your web applications, tailoring them to your style precisely. There are such with solid color and such with a gradient effect, as well as with round and sharp edges. Present the information on your page stunningly with little to no work.

DownloadPreview

Property Values

Value	Description	Play it
auto	Browsers use an automatic table layout algorithm. The column width is set by the widest unbreakable content in the cells. The content will dictate the layout	Play it »
fixed	Sets a fixed table layout algorithm. The table and column widths are set by the widths of table and col or by the width of the first row of cells. Cells in other rows do not affect column widths. If no widths are present on the first row, the column widths are divided equally across the table, regardless of content inside the cells	Play it »
initial	Sets this property to its default value. Read about initial	Play it »
inherit	Inherits this property from its parent element. Read about inherit

Ширина таблицы

По умолчанию ширина таблицы устанавливается браузером самостоятельно, исходя из объёма в ней табличных данных. Если текста в ячейках много, тогда таблица будет занимать всю доступную ей ширину, а если мало, то ширина таблицы автоматически уменьшится. При наличии на странице нескольких таблиц их разная ширина выглядит порой небрежно. Так что лучше явно задать ширину таблицы в процентах, пикселях, em или любых других единицах CSS, как показано в примере 1.

Пример 1. Ширина таблицы в процентах

В данном примере ширина 100% применяется ко всем таблицам. Опять же, классы помогают установить ширину для выбранных таблиц задействуя ранее созданный класс. Чтобы указать таблице ширину в 200 пикселей надо добавить к элементу <table> класс tbl-small.

Responsive Table V1 by Colorlib

Responsive tables have always been a huge problem because you cannot resize them to a certain point to still make them useful. Not anymore, as these HTML/CSS tables will work well on any mobile devices. Whether it is the Table V1 by Colorlib or any other product that you find on this list, the performance will be top-notch across all devices and platforms. Enjoy the catchy, yet simplistic design and make the table yours with a click on the button. Use it for orders, for pricings, for schedules, you name it, you have very many options and possibilities for as long as you do not limit yourself.

DownloadPreview

Какую программу выбрать для проверки скорости sd карты

Как создать таблицу CSS

Модель CSS таблиц основана на модели таблиц HTML4 и хорошо поддерживается браузерами. В обеих моделях структура таблицы существует параллельно визуальному представлению.

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

Наверняка вы работали с таблицами HTML раньше. Если да, то у вас не будет проблем с созданием таблиц CSS.

Каждый элемент таблицы HTML имеет эквивалент в CSS. Единственное отличие заключается в отсутствии отличий между и в варианте CSS.

Ниже приводится список элементов таблиц HTML и соответствующие им значения CSS.

table     { display: table }

tr        { display: table-row }

thead     { display: table-header-group }

tbody     { display: table-row-group }

tfoot     { display: table-footer-group }

col       { display: table-column }

colgroup  { display: table-column-group }

td, th    { display: table-cell }

caption   { display: table-caption }

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

#caption {caption-side: top}

#caption {caption-side: bottom}

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

<div id="table">

  <div class="row">

    <span class="cell"></span>

    <span class="cell"></span>

     <span class="cell"></span>

  </div>

  <div class="row">

    <span class="cell"></span>

    <span class="cell"></span>

     <span class="cell"></span>

  </div>

  <div class="row">

    <span class="cell"></span>

    <span class="cell"></span>

     <span class="cell"></span>

  </div>

</div>

#table {display: table;}

.row {display: table-row;}

.cell {display: table-cell;}

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

Совсем небольшой код CSS представляет элементы и в виде таблицы.

В дополнение к выше приведенным свойствам модель таблицы CSS включает значение inline-table, которая определяет новую таблицу как и display: table, но в рамках контекста встроенного в HTML код формата .

Столбцы и их группировка

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

border — обычное свойство, пока свойство border-collapse не используется для элемента таблицы;
background — обычное свойство, пока строка и ячейка имеют прозрачный фон;
width — установка ширины столбца;
visibility — если имеет значение collapse (единственное доступное значение), то ячейка столбца не будет выводиться (она объединяется с другими столбцами и ширина таблицы выравнивается).

CSS Reference

CSS ReferenceCSS Browser SupportCSS SelectorsCSS FunctionsCSS Reference AuralCSS Web Safe FontsCSS Font FallbacksCSS AnimatableCSS UnitsCSS PX-EM ConverterCSS ColorsCSS Color ValuesCSS Default ValuesCSS Entities

CSS Properties

align-content
align-items
align-self
all
animation
animation-delay
animation-direction
animation-duration
animation-fill-mode
animation-iteration-count
animation-name
animation-play-state
animation-timing-function

backface-visibility
background
background-attachment
background-blend-mode
background-clip
background-color
background-image
background-origin
background-position
background-repeat
background-size
border
border-bottom
border-bottom-color
border-bottom-left-radius
border-bottom-right-radius
border-bottom-style
border-bottom-width
border-collapse
border-color
border-image
border-image-outset
border-image-repeat
border-image-slice
border-image-source
border-image-width
border-left
border-left-color
border-left-style
border-left-width
border-radius
border-right
border-right-color
border-right-style
border-right-width
border-spacing
border-style
border-top
border-top-color
border-top-left-radius
border-top-right-radius
border-top-style
border-top-width
border-width
bottom
box-decoration-break
box-shadow
box-sizing
break-after
break-before
break-inside

caption-side
caret-color
@charset
clear
clip
clip-path
color
column-count
column-fill
column-gap
column-rule
column-rule-color
column-rule-style
column-rule-width
column-span
column-width
columns
content
counter-increment
counter-reset
cursor

direction
display
empty-cells
filter
flex
flex-basis
flex-direction
flex-flow
flex-grow
flex-shrink
flex-wrap
float
font
@font-face
font-family
font-feature-settings
font-kerning
font-size
font-size-adjust
font-stretch
font-style
font-variant
font-variant-caps
font-weight

grid
grid-area
grid-auto-columns
grid-auto-flow
grid-auto-rows
grid-column
grid-column-end
grid-column-gap
grid-column-start
grid-gap
grid-row
grid-row-end
grid-row-gap
grid-row-start
grid-template
grid-template-areas
grid-template-columns
grid-template-rows

hanging-punctuation
height
hyphens
@import
isolation
justify-content
@keyframes
left
letter-spacing

line-height
list-style
list-style-image
list-style-position
list-style-type

margin
margin-bottom
margin-left
margin-right
margin-top
max-height
max-width
@media
min-height
min-width
mix-blend-mode

object-fit
object-position
opacity
order
outline
outline-color
outline-offset
outline-style
outline-width
overflow
overflow-x
overflow-y

padding
padding-bottom
padding-left
padding-right
padding-top
page-break-after
page-break-before
page-break-inside
perspective
perspective-origin
pointer-events
position
quotes

resize
right

scroll-behavior

tab-size
table-layout
text-align
text-align-last
text-decoration
text-decoration-color
text-decoration-line
text-decoration-style
text-indent
text-justify
text-overflow
text-shadow
text-transform
top

transform
transform-origin
transform-style
transition
transition-delay
transition-duration
transition-property
transition-timing-function

unicode-bidi
user-select

vertical-align
visibility

white-space
width
word-break
word-spacing
word-wrap
writing-mode

z-index

Есть ключевое различие

Как и те, кто учился по «CSS Zen Garden», я испытываю отвращение к табличной вёрстке в HTML. Сам того не понимая, я позволял обманчивым предубеждениям ввести себя в заблуждение, преувеличивая взаимосвязь между HTML- и CSS-таблицами.

На самом деле, у CSS-таблиц есть одно ключевое отличие от HTML-таблиц: они могут перестать быть таблицами, стоит только изменить их CSS-свойства. А HTML-таблицы на такое не способны. Это открывает перед нами широкие возможности выборочного использования в вёрстке нужных табличных особенностей.

Ниже вы найдёте несколько примеров использования :

Динамическое вертикальное выравнивание по центру

Нажимайте на кнопку, чтобы добавить строчки.

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

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

Динамическое горизонтальное выравнивание по центру

Чтобы горизонтально расположить по центру динамический элемент, можно сделать его блочно-строчным (). Затем внешнему контейнеру этого элемента нужно задать свойство . Недостаток этого способа состоит в «побочном эффекте» выравнивания текста по центру. Все дочерние элементы внутри контейнера унаследуют свойство , которое может переопределить существующие свойства.

Благодаря @mojtabaseyedi я нашёл новый способ выравнивать динамические элементы по горизонтали без побочных эффектов. Нужно применить к динамическому элементу и .

Адаптивная вёрстка

Уменьшите окно до , чтобы увидеть адаптивность в действии.

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

Порядок следования меняется с 1-2-3 на 2-3-1

Можно даже изменить порядок следования блочных элементов. Подробнее об этом приёме можно почитать здесь.

Динамический прилипающий подвал

Прилипающий подвал должен соответствовать двум требованиям:

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

Если вы когда-нибудь искали решение этой задачи, то вам, возможно, попадались эти полезные варианты от Chris Coyier и Ryan Fait.

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

Разметка «Holy Grail»

Разметка «Holy Grail» (от A List Apart) — это вариант разметки страницы с шапкой, тремя равными по высоте колонками (две фиксированных боковых колонки и тянущийся центр) и прилипающим подвалом.

Разметка «Holy Grail»

Такая разметка должна по мере возможности удовлетворять следующим требованиям:

Центральная колонка должна тянуться, а боковые — иметь фиксированную ширину.
Центральная колонка может идти первой в разметке.
Любая колонка может быть больше остальных по высоте.

Разметка «Holy Grail» с помощью

В примере выше показана разметка «Holy Grail». Можете менять размеры окна, чтобы средняя колонка тянулась по ширине; также можно добавить контент, чтобы посмотреть, как работает прилипающий подвал. Единственное требование, которому эта разметка не соответствует, — это пункт 2: «Центральная колонка может идти первой в разметке».

Наверно, это нужно для поисковой оптимизации. То есть если соображения SEO для вас не стоят на первом месте, с помощью вы сравнительно легко сделаете разметку «Holy Grail».

Чередование фонового цвета строк таблицы

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

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Название документа</title>
    <style>
      table {
        width: 70%;
        border-collapse: collapse;
      }
      td, th {
        border: 1px solid #98bf21;
        padding: 3px 7px 2px 7px;
      }
      th {
        text-align: left;
        padding: 5px;
        background-color: #A7C942;
        color: #fff;
      }
      .alt td { background-color: #EAF2D3; }
    </style>
  </head>
  <body>
    <table>
      <tr><th>Имя</th><th>Фамилия</th><th>Положение</th></tr>
      <tr><td>Гомер</td><td>Симпсон</td><td>отец</td></tr>
      <tr class="alt"><td>Мардж</td><td>Симпсон</td><td>мать</td></tr>
      <tr><td>Барт</td><td>Симпсон</td><td>сын</td></tr>
      <tr class="alt"><td>Лиза</td><td>Симпсон</td><td>дочь</td></tr>
    </table>
  </body>
</html>

Попробовать »

Добавлять атрибут к каждой второй строке довольно утомительное занятие. В CSS3 был добавлен псевдо-класс :nth-child, позволяющий решить эту проблему альтернативным путем. Теперь эффекта чередования можно достичь исключительно средствами CSS, не прибегая к изменению HTML-разметки документа. С помощью псевдо-класса можно выбрать все четные или нечетные строки таблицы, используя одно из ключевых слов: (четные) или (нечетные):

tr:nth-child(odd) { background-color: #EAF2D3; }

Попробовать »

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;}

Tables

Chris Smith
October 17, 2019

HTML / CSS (SCSS)

About a code

Zigzag Table

A table formatted in a zigzag diagonal layout.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: —

Estelle Weyl
June 11, 2018

HTML / CSS

About a code

Table with Frozen Table Header and Left Column

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: —

Nathan Cockerill
February 1, 2018

HTML
CSS/SCSS
JavaScript (jquery.js)

About the code

Sort Table Rows By Table Headers

Sort table rows by table headers — ascending and descending.

Faiz Ahme
January 11, 2018

HTML
CSS/SCSS

About the code

Flor Antara
June 15, 2017

HTML / CSS

About the code

Responsive Table HTML and CSS Only

HTML table made responsive only with CSS. On mobile the header row is fixed to the left, and the content is scrollable horizontally.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: —

Demo Image: Responsive Table With Flexbox

Responsive Table With Flexbox

The idea was to create a nice working table which is working on smaller screens also.
Made by Matys
April 6, 2017

download
demo and code

Demo Image: CSS Responsive Table Layout

CSS Responsive Table Layout

Using CSS for responsive table layouts instead of floats. Responsive (everything goes down to one row each), too.
Made by Luke Peters
February 21, 2017

download
demo and code

Demo Image: Fixed Table Header

Fixed Table Header

Fixed table header with simple jQuery code.
Made by Nikhil Krishnan
November 3, 2016

download
demo and code

Demo Image: Responsive Table

Responsive Table

CSS tricks method responsive table.
Made by Alico
April 11, 2016

download
demo and code

Demo Image: Pure CSS Table Highlight

Pure CSS Table Highlight

A simple (and nasty) trick to have vertical and horizontal highlight on hover on tables made with pure CSS.
Made by Alexander Erlandsson
March 22, 2016

download
demo and code

Wolf Wortmann
April 30, 2015

HTML / CSS

About the code

Sticky Table Headers by

Trying out to make a sweet table with sticky table headers if their table is in the viewport (like the iOS names list names beginning capital letter).

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: —

Demo Image: Responsive Table

Responsive Table

Responsive table with rwd-table-patterns.
Made by SitePoint
April 15, 2015

download
demo and code

Demo Image: CSS Responsive Table & Detail View

CSS Responsive Table & Detail View

An example table and detail view scenario.
Made by Heather Buchel
June 29, 2014

download
demo and code

Demo Image: Responsive Table

Responsive Table

Table collapses into a «list» on small screens. Headers are pulled from data attributes.
Made by Geoff Yuen
March 25, 2014

download
demo and code

About the code

Responsive And Accessible Data Table

Mobile-first responsive and accessible data table. At narrower view ports, the thead is hidden, rows are turned into cards with labels shown using a attribute.

Demo Image: Table In HTML & CSS

download
demo and code