Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <title>Task 3: Grid Component</title>
- <style type="text/css">
- table {
- border-radius: 7px;
- vertical-align: middle;
- }
- table, td {
- border-style: solid;
- border-width: 1px;
- border-spacing: initial;
- padding-left: 7px;
- }
- .background {
- background-color: lightblue;
- }
- #upperBorder {
- border-top-left-radius: 7px;
- border-top-right-radius: 7px;
- }
- #productID {
- width: 80px;
- text-align: center;
- }
- #productName {
- width: 240px;
- text-align: left;
- }
- #unitPrice {
- width: 150px;
- text-align: left;
- }
- #qPerUnit {
- width: 150px;
- text-align: left;
- }
- #unitInStock {
- width: 150px;
- text-align: left;
- }
- #discount {
- width: 100px;
- text-align: center;
- }
- #textID {
- width: 20px;
- }
- #textName {
- width: 100px;
- }
- #textPrice {
- width: 60px;
- }
- #textQuantity {
- width: 80px;
- }
- #textUnit {
- width: 80px;
- }
- .leftTextAlign {
- text-align: left;
- vertical-align:super;
- }
- #bottomBorder {
- border-bottom-left-radius: 7px;
- border-bottom-right-radius: 7px;
- }
- #redBorder {
- border: 1px solid;
- border-radius: 2px;
- border-color: red;
- }
- form {
- margin:0px;
- padding:0px;
- }
- #rightAlign {
- float:right;
- }
- </style>
- </head>
- <body>
- <table>
- <tr>
- <td colspan="6" class="background" id="upperBorder">Drag a column and drop it here to group by that column</td>
- </tr>
- <tr>
- <td class="background" id="productID">ProductID</td>
- <td class="background" id="productName">Product name</td>
- <td class="background" id="unitPrice">Unit Price</td>
- <td class="background" id="qPerUnit">Quantity per unit</td>
- <td class="background" id="unitInStock">Unit in stock</td>
- <td class="background" id="discount">Discontinued</td>
- </tr>
- <tr>
- <td class="background">
- <input type="text" title="textID" id="textID" class="leftTextAlign" required="true" pattern="[0-9]{3}" /></td>
- <td class="background">
- <input type="text" title="textName" id="textName" class="leftTextAlign" required="true" pattern="^[a-zA-Z0-9_]{3,20}$" /></td>
- <td class="background">
- <form>
- <input type="text" id="textPrice" class="leftTextAlign"/>
- <input type="image" src="\images\funnel.png" alt="funnel"/></form></td>
- <td class="background">
- <input type="text" id="textQuantity" class="leftTextAlign" /></td>
- <td class="background">
- <form>
- <input type="text" id="textUnit" class="leftTextAlign" />
- <input type="image" src="\images\funnel.png" alt="funnel"/></form></td>
- <td class="background">
- <form>
- <input type="checkbox" />
- <input type="image" src="\images\funnel.png" alt="funnel"/></form></td>
- </tr>
- <tr>
- <td>1</td>
- <td>Chai</td>
- <td>$18.00</td>
- <td>10 boxes x 20 bags</td>
- <td>39</td>
- <td>
- <input type="checkbox" /></td>
- </tr>
- <tr>
- <td>2</td>
- <td>Chang</td>
- <td>$19.00</td>
- <td>24 - 12 oz bottles</td>
- <td>17</td>
- <td>
- <input type="checkbox" /></td>
- </tr>
- <tr>
- <td>3</td>
- <td>Aniseed Syrup</td>
- <td>$10.00</td>
- <td>12 - 550 ml bottles</td>
- <td>13</td>
- <td>
- <input type="checkbox" /></td>
- </tr>
- <tr>
- <td>4</td>
- <td>Chef Anton's Cajun Seasoning</td>
- <td>$22.00</td>
- <td>48 - 6 oz jars</td>
- <td>53</td>
- <td>
- <input type="checkbox" /></td>
- </tr>
- <tr>
- <td>5</td>
- <td>Chef Anton's Gumbo Mix</td>
- <td>$21.35</td>
- <td>36 boxes </td>
- <td>0</td>
- <td>
- <input type="checkbox" checked /></td>
- </tr>
- <tr>
- <td>6</td>
- <td>Grandma's Boysenberry Spread</td>
- <td>$25.00</td>
- <td>12 - 8 oz jars</td>
- <td>120</td>
- <td>
- <input type="checkbox" /></td>
- </tr>
- <tr>
- <td>7</td>
- <td>Uncle Bob's Organic Dried Pears</td>
- <td>$30.00</td>
- <td>12 - 1 lb pkgs.</td>
- <td>15</td>
- <td>
- <input type="checkbox" /></td>
- </tr>
- <tr>
- <td>8</td>
- <td>Northwoods Cranberry Sauce</td>
- <td>$40.00</td>
- <td>12 - 12 oz jars</td>
- <td>6</td>
- <td>
- <input type="checkbox" /></td>
- </tr>
- <tr>
- <td>9</td>
- <td>Mishi Kobe Niku</td>
- <td>$97.00</td>
- <td>18 - 500 g pkgs.</td>
- <td>29</td>
- <td>
- <input type="checkbox" checked /></td>
- </tr>
- <tr>
- <td>10</td>
- <td>Ikura</td>
- <td>$31.00</td>
- <td>12 - 200 ml jars</td>
- <td>31</td>
- <td>
- <input type="checkbox" /></td>
- </tr>
- <tr>
- <td colspan="6" class="background" id="bottomBorder">
- <form>
- <input type="image" src="images\BLArrow.png" alt="start"/>
- <input type="image" src="images\LArrow.png" alt="leftArrow"/>
- <span><a href="#" id="redBorder">1</a>
- <a href="#">2</a>
- <a href="#">3</a>
- <a href="#">4</a>
- <a href="#">5</a>
- <a href="#">6</a>
- <a href="#">7</a>
- <a href="#">8</a>
- <a href="#">9</a>
- <a href="#">10</a>
- <a href="#">...</a>
- </span>
- <input type="image" src="images\RArrow.png" alt="rightArrow" />
- <input type="image" src="images\BRArrow.png" alt="finishArrow" />
- <label for="PageSize">Page size</label>
- <select id="PageSize">
- <option value="Value 1" selected="selected">10</option>
- <option value="Value 2">20</option>
- <option value="Value 3">50</option>
- <option value="Value 4">100</option>
- </select>
- </form>
- <span id="rightAlign">335104 items in 33511 pages</span>
- </td>
- </tr>
- </table>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement