Pagination само с HTML

3 април 201511 г.

Здравейте, Имам една задачка да направя таблица с много редове, но съответно да се изобразяват точно определен брой редове на страница. Трябва да е с алтернативен pagination. Без java, php и др. Трябва да се използват само html. Верно може да е много писане, но такава е задачата Нещо такова:

Няма значение. Намерих как се прави задачата. Идеята беше да изглежда козмечно така, но не и функционално.

Редактирано 3 април 201511 г. от KYordanova (преглед на промените)

Цитирай

3 април 201511 г.

Здравей! От вчера и аз се занимавам с HTML (имам да правя проект в уни-то) и гледам едни уроци, от които този ще ти е полезен защото има всичко описано за таблиците и ще го разбереш без проблем:
http://videotutorials-bg.com/lessons.php?action=viewsub&id=25&t=27&page=2

Цитирай

3 април 201511 г.

Само с CSS и HTML и pagination, направих 3 файла за таблица от 3 страници. "table1.html", "table2.html", "table3.html"

файл table1.html


<!DOCTYPE html>
<html>
 
<head>
<title>Таблица на много страници само с HTML</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="[url=http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css]http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">[/url]
  <script src="[url=https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js]https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>[/url]
  <script src="[url=http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js]http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>[/url]
<style>
th {
    background-color:black;
color:white;
text-align:center;
}
 
.odd {
    background-color: yellow;
    text-align: center;
}
 
.even {
    text-align: center;
background-color:aliceblue;
}
</style>
</head>
 
<body>
 
<table style = "width:100%;">
<tr>
<th style = "width:20%;">
Gender
</th>
<th style = "width:20%;">
Seen a Blu-ray Movie
</th>
<th style = "width:20%;">
Own Blu-Ray Player
</th>
<th style = "width:20%;">
Own HDTV
</th>
<th style = "width:20%;">
Movie Source
</th>
</tr>
<tr>
<td style = "width:20%;" class = "odd">
Female
</td>
<td style = "width:20%;" class = "odd">
No
</td>
<td style = "width:20%;" class = "odd">
No
</td>
<td style = "width:20%;" class = "odd">
No
</td>
<td style = "width:20%;" class = "odd">
Netflix
</td>
</tr>
<tr>
<td style = "width:20%;" class = "even">
Female
</td>
<td style = "width:20%;" class = "even">
No
</td>
<td style = "width:20%;" class = "even">
No
</td>
<td style = "width:20%;" class = "even">
No
</td>
<td style = "width:20%;" class = "even">
Netflix
</td>
</tr>
<tr>
<td style = "width:20%;" class = "odd">
Female
</td>
<td style = "width:20%;" class = "odd">
No
</td>
<td style = "width:20%;" class = "odd">
No
</td>
<td style = "width:20%;" class = "odd">
No
</td>
<td style = "width:20%;" class = "odd">
Netflix
</td>
</tr>
<tr>
<td colspan = "2" style = "width:20%;" class = "even">
Showing 1 to 3 of 9 rows
</td>
<td style = "width:20%;" class = "even">
 
</td>
<td style = "width:20%;" class = "even">
 
</td>
<td style = "width:20%;" class = "even">
<ul class = "pagination"> <li><a href="table2.html">2</a></li> <li><a href="table3.html">3</a></li> </ul>
</td>
</tr>
</table>
 
</body>
</html>


файл table2.html


<!DOCTYPE html>
<html>
 
<head>
<title>Таблица на много страници само с HTML</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="[url=http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css]http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">[/url]
  <script src="[url=https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js]https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>[/url]
  <script src="[url=http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js]http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>[/url]
<style>
th {
    background-color:black;
color:white;
text-align:center;
}
 
.odd {
    background-color: yellow;
    text-align: center;
}
 
.even {
    text-align: center;
background-color:aliceblue;
}
</style>
</head>
 
<body>
 
<table style = "width:100%;">
<tr>
<th style = "width:20%;">
Gender
</th>
<th style = "width:20%;">
Seen a Blu-ray Movie
</th>
<th style = "width:20%;">
Own Blu-Ray Player
</th>
<th style = "width:20%;">
Own HDTV
</th>
<th style = "width:20%;">
Movie Source
</th>
</tr>
<tr>
<td style = "width:20%;" class = "odd">
Male
</td>
<td style = "width:20%;" class = "odd">
No
</td>
<td style = "width:20%;" class = "odd">
No
</td>
<td style = "width:20%;" class = "odd">
No
</td>
<td style = "width:20%;" class = "odd">
Netflix
</td>
</tr>
<tr>
<td style = "width:20%;" class = "even">
Male
</td>
<td style = "width:20%;" class = "even">
No
</td>
<td style = "width:20%;" class = "even">
No
</td>
<td style = "width:20%;" class = "even">
No
</td>
<td style = "width:20%;" class = "even">
Netflix
</td>
</tr>
<tr>
<td style = "width:20%;" class = "odd">
Male
</td>
<td style = "width:20%;" class = "odd">
No
</td>
<td style = "width:20%;" class = "odd">
No
</td>
<td style = "width:20%;" class = "odd">
No
</td>
<td style = "width:20%;" class = "odd">
Netflix
</td>
</tr>
<tr>
<td colspan = "2" style = "width:20%;" class = "even">
Showing 4 to 6 of 9 rows
</td>
<td style = "width:20%;" class = "even">
 
</td>
<td style = "width:20%;" class = "even">
 
</td>
<td style = "width:20%;" class = "even">
<ul class = "pagination"> <li><a href="table1.html">1</a></li> <li><a href="table3.html">3</a></li> </ul>
</td>
</tr>
</table>
 
</body>
</html>


файл table3.html


<!DOCTYPE html>
<html>
 
<head>
<title>Таблица на много страници само с HTML</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="[url=http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css]http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">[/url]
  <script src="[url=https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js]https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>[/url]
  <script src="[url=http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js]http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>[/url]
<style>
th {
    background-color:black;
color:white;
text-align:center;
}
 
.odd {
    background-color: yellow;
    text-align: center;
}
 
.even {
    text-align: center;
background-color:aliceblue;
}
</style>
</head>
 
<body>
 
<table style = "width:100%;">
<tr>
<th style = "width:20%;">
Gender
</th>
<th style = "width:20%;">
Seen a Blu-ray Movie
</th>
<th style = "width:20%;">
Own Blu-Ray Player
</th>
<th style = "width:20%;">
Own HDTV
</th>
<th style = "width:20%;">
Movie Source
</th>
</tr>
<tr>
<td style = "width:20%;" class = "odd">
Female
</td>
<td style = "width:20%;" class = "odd">
No
</td>
<td style = "width:20%;" class = "odd">
No
</td>
<td style = "width:20%;" class = "odd">
No
</td>
<td style = "width:20%;" class = "odd">
Netflix
</td>
</tr>
<tr>
<td style = "width:20%;" class = "even">
Male
</td>
<td style = "width:20%;" class = "even">
No
</td>
<td style = "width:20%;" class = "even">
No
</td>
<td style = "width:20%;" class = "even">
No
</td>
<td style = "width:20%;" class = "even">
Netflix
</td>
</tr>
<tr>
<td style = "width:20%;" class = "odd">
Female
</td>
<td style = "width:20%;" class = "odd">
No
</td>
<td style = "width:20%;" class = "odd">
No
</td>
<td style = "width:20%;" class = "odd">
No
</td>
<td style = "width:20%;" class = "odd">
Netflix
</td>
</tr>
<tr>
<td colspan = "2" style = "width:20%;" class = "even">
Showing 7 to 9 of 9 rows
</td>
<td style = "width:20%;" class = "even">
 
</td>
<td style = "width:20%;" class = "even">
 
</td>
<td style = "width:20%;" class = "even">
<ul class = "pagination"> <li><a href="table1.html">1</a></li> <li><a href="table2.html">2</a></li> </ul>
</td>
</tr>
</table>
 
</body>
</html>

Редактирано 4 април 201511 г. от Реджеп Иведик (преглед на промените)

Цитирай

12 април 201511 г.

JS библиотека като jquery имаш ли право да използваш?

Цитирай

Добре дошли!

Pagination само с HTML

Featured Replies

Архивирана тема

Разглеждащи това в момента 0

Дарение

Бюлетин

Профил

Навигация

Търсене

Конфигуриране на push известия в браузъра

Chrome (Android)

Chrome (Desktop)

Safari (iOS 16.4+)

Safari (macOS)

Edge (Android)

Edge (Desktop)

Firefox (Android)

Firefox (Desktop)