Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
- <title>Tables and Forms</title>
- <link rel="stylesheet" type="text/css" href="style.css" />
- </head>
- <body>
- <div id="content">
- <table>
- <thead>
- <tr>
- <th rowspan="2">
- Order
- </th>
- <th colspan="3">
- Personal Info
- </th>
- <th colspan="5">
- University Marks
- </th>
- </tr>
- <tr>
- <th>
- First Name
- </th>
- <th>
- Last Name
- </th>
- <th>
- Faculty Number
- </th>
- <th>
- English
- </th>
- <th>
- Math
- </th>
- <th>
- Biology
- </th>
- <th>
- Physics
- </th>
- <th class="total">
- Total
- </th>
- </tr>
- </thead>
- <tfoot>
- <tr>
- <td colspan="9">
- <form method="get" action="#">
- <fieldset>
- <button type="button">Previous</button>
- <ul>
- <li><a href="#">1</a>, </li>
- <li><a href="#">2</a>, </li>
- <li><a href="#">3</a>, </li>
- <li><a href="#">4</a>, </li>
- <li><a href="#">...</a>, </li>
- <li><a href="#">10</a></li>
- </ul>
- <button type="button">Next</button>
- </fieldset>
- </form>
- </td>
- </tr>
- </tfoot>
- <tr>
- <td>
- 1
- </td>
- <td>
- Pesho
- </td>
- <td>
- Yordanov
- </td>
- <td>
- 123456
- </td>
- <td>
- 2
- </td>
- <td>
- 3
- </td>
- <td>
- 4
- </td>
- <td>
- 5
- </td>
- <td class="total">
- 3.50
- </td>
- </tr>
- <tr>
- <td>
- 2
- </td>
- <td>
- Pesho
- </td>
- <td>
- Yordanov
- </td>
- <td>
- 123456
- </td>
- <td>
- 2
- </td>
- <td>
- 3
- </td>
- <td>
- 4
- </td>
- <td>
- 5
- </td>
- <td class="total">
- 3.50
- </td>
- </tr>
- <tr>
- <td>
- 3
- </td>
- <td>
- Pesho
- </td>
- <td>
- Yordanov
- </td>
- <td>
- 123456
- </td>
- <td>
- 2
- </td>
- <td>
- 3
- </td>
- <td>
- 4
- </td>
- <td>
- 5
- </td>
- <td class="total">
- 3.50
- </td>
- </tr>
- <tr>
- <td>
- 4
- </td>
- <td>
- Pesho
- </td>
- <td>
- Yordanov
- </td>
- <td>
- 123456
- </td>
- <td>
- 2
- </td>
- <td>
- 3
- </td>
- <td>
- 4
- </td>
- <td>
- 5
- </td>
- <td class="total">
- 3.50
- </td>
- </tr>
- <tr>
- <td>
- 5
- </td>
- <td>
- Pesho
- </td>
- <td>
- Yordanov
- </td>
- <td>
- 123456
- </td>
- <td>
- 2
- </td>
- <td>
- 3
- </td>
- <td>
- 4
- </td>
- <td>
- 5
- </td>
- <td class="total">
- 3.50
- </td>
- </tr>
- <tr>
- <td>
- 6
- </td>
- <td>
- Pesho
- </td>
- <td>
- Yordanov
- </td>
- <td>
- 123456
- </td>
- <td>
- 2
- </td>
- <td>
- 3
- </td>
- <td>
- 4
- </td>
- <td>
- 5
- </td>
- <td class="total">
- 3.50
- </td>
- </tr>
- <tr>
- <td>
- 7
- </td>
- <td>
- Pesho
- </td>
- <td>
- Yordanov
- </td>
- <td>
- 123456
- </td>
- <td>
- 2
- </td>
- <td>
- 3
- </td>
- <td>
- 4
- </td>
- <td>
- 5
- </td>
- <td class="total">
- 3.50
- </td>
- </tr>
- <tr>
- <td>
- 8
- </td>
- <td>
- Pesho
- </td>
- <td>
- Yordanov
- </td>
- <td>
- 123456
- </td>
- <td>
- 2
- </td>
- <td>
- 3
- </td>
- <td>
- 4
- </td>
- <td>
- 5
- </td>
- <td class="total">
- 3.50
- </td>
- </tr>
- <tr>
- <td>
- 9
- </td>
- <td>
- Pesho
- </td>
- <td>
- Yordanov
- </td>
- <td>
- 123456
- </td>
- <td>
- 2
- </td>
- <td>
- 3
- </td>
- <td>
- 4
- </td>
- <td>
- 5
- </td>
- <td class="total">
- 3.50
- </td>
- </tr>
- <tr>
- <td>
- 10
- </td>
- <td>
- Pesho
- </td>
- <td>
- Yordanov
- </td>
- <td>
- 123456
- </td>
- <td>
- 2
- </td>
- <td>
- 3
- </td>
- <td>
- 4
- </td>
- <td>
- 5
- </td>
- <td class="total">
- 3.50
- </td>
- </tr>
- </table>
- </div>
- </body>
- </html>
- ***************************************************
- CSS
- ****************************
- root {
- display: block;
- }
- body, table, td, fieldset
- {
- border: 0px;
- margin: 0px;
- padding: 0px;
- }
- body
- {
- font-family: "Times New Roman",Georgia,Serif;
- font-size: 16px;
- background-color: #FFFFFF;
- color: #000000;
- }
- #content
- {
- margin: 10px;
- }
- fieldset
- {
- margin: 0px;
- padding: 0px;
- }
- table
- {
- border: 1px solid #706f6f;
- border-spacing: 0px;
- }
- td, th
- {
- border: 1px solid #bfbfbf;
- padding: 5px;
- }
- .total
- {
- font-weight: bold;
- text-align: center;
- }
- ul
- {
- display: inline;
- margin: 0px;
- padding: 0px;
- }
- li
- {
- list-style: none;
- display: inline;
- }
Advertisement
Add Comment
Please, Sign In to add comment