HTML Notebook store Как да одебеля всички borders?


0

Здравейте, приятели! Това е снимка как ми изглежда за сега таблицата http://imgur.com/h1kZxfw 

Бих искал да одебеля бордърите навсякъде, а и също да махна бордърите между fieldset-овете.

<!DOCTYPE html> <html> <head> <style> table { border-collapse: collapse; } </style> <meta charset="utf-8"> <title>Notebook Store</title> </head> <body> <table cellpadding="9px" border="3px"> <tr> <th colspan="3"><font size="5" color="skyblue"> <u> Apple Toshiba Lenovo Dell Acer Hacer HP</u></font></th> </tr> <tr> <td> <table border="3px" cellpadding="9px"> <tr> <td> <fieldset> <legend align="middle"><b>Apple MacBook Air</b></legend> <table> <tr> <td rowspan="2"><img width="150px" src="note.png" alt="note" /></td> <td><b>64GB SSD</b></td> </tr> <tr> <td><b> 2GB DDR</b></td> </tr> <tr> <td><b>1300 USD</b></td> <td><b>Intel Core i5</b></td> </tr> </table> </fieldset> </td> <td> <fieldset> <legend align="middle"><b>Apple MacBook Air</b></legend> <table> <tr> <td rowspan="2"><img width="150px" src="note.png" alt="note" /></td> <td><b>64GB SSD</b></td> </tr> <tr> <td><b> 2GB DDR</b></td> </tr> <tr> <td><b>1300 USD</b></td> <td><b>Intel Core i5</b></td> </tr> </table> </fieldset> </td> </tr> <tr> <td> <fieldset> <legend align="middle"><b>Apple MacBook Air</b></legend> <table> <tr> <td rowspan="2"><img width="150px" src="note.png" alt="note" /></td> <td><b>64GB SSD</b></td> </tr> <tr> <td><b> 2GB DDR</b></td> </tr> <tr> <td><b>1300 USD</b></td> <td><b>Intel Core i5</b></td> </tr> </table> </fieldset> </td> <td> <fieldset> <legend align="middle"><b>Apple MacBook Air</b></legend> <table> <tr> <td rowspan="2"><img width="150px" src="note.png" alt="note" /></td> <td><b>64GB SSD</b></td> </tr> <tr> <td><b> 2GB DDR</b></td> </tr> <tr> <td><b>1300 USD</b></td> <td><b>Intel Core i5</b></td> </tr> </table> </fieldset> </td> </tr> <tr> <td> <fieldset> <legend align="middle"><b>Apple MacBook Air</b></legend> <table> <tr> <td rowspan="2"><img width="150px" src="note.png" alt="note" /></td> <td><b>64GB SSD</b></td> </tr> <tr> <td><b> 2GB DDR</b></td> </tr> <tr> <td><b>1300 USD</b></td> <td><b>Intel Core i5</b></td> </tr> </table> </fieldset> </td> <td> <fieldset> <legend align="middle"><b>Apple MacBook Air</b></legend> <table> <tr> <td rowspan="2"><img width="150px" src="note.png" alt="note" /></td> <td><b>64GB SSD</b></td> </tr> <tr> <td><b> 2GB DDR</b></td> </tr> <tr> <td><b>1300 USD</b></td> <td><b>Intel Core i5</b></td> </tr> </table> </fieldset> </td> </tr> </table> </td> <td> <table> <tr> <td> <table width="150px" height="300px"> <tr> <td align="middle"> <b>Min Price: 500 USD </b> <br> <input type="range" name="minusd" min="200" max="750" value="50%"> </td> </tr> <tr> <td align="middle"> <b>Max Price: 1500 USD </b> <br> <input type="range" name="maxusd" min="200" max="750" value="50%"> </td> </tr> <tr> <td align="middle"> <b>Min Ram: 4 GB</b> <br> <input type="range" name="minram" min="2" max="6" value="4"> </td> </tr> <tr> <td align="middle"> <b>Max Ram: 16 GB </b> <br> <input type="range" name="maxram" min="8" max="16" value="50%"> </td> </tr> </table> </td> </tr> </table> </td> </tr> </table> </body> </html>




Отговори



2

Здравей, дебелината на линията на fieldset-овете можеш да направиш с css:

fieldset { border: 3px solid #000; }

Тъй като и без друго се налага да ползваш css, ти предлагам да махнеш всички стойности на border от html-a, защото този атрибут е излязъл от употреба, и да ползваш вместо тях този код като сложиш class="bordered" на главната таблица и първата вмъкната:

<style>

table { border-collapse: collapse;  border: none; }

.bordered, th, fieldset { border: 3px solid #000; }

</style>

По същия начин можеш да заместиш и cellpadding с padding в css.

Имаш и някои грешки в кода:

  • th трябва да е с colspan="2"
  • В html размерите се дават само с числа - 150 вместо 150px.
  • Хоризонталното центриране в клетката се прави със center, middle е за вертикално центриране. Но и двете вече са валидни само в css, макар че align се визуализира от браузърите.

Съветвам те да си проверяваш кода с валидатор: https://validator.w3.org/


от nasesss (130 точки)


1
За удебеляването използвай просто border-style: solid, но трябва да се съобразиш дали наистина искаш всички елементи да са еднакво форматирани, виж повече опции тук ако искаш да смениш големините им "px":
http://www.w3schools.com/cssref/pr_border-width.asp
Относно fieldset също е лесно, ще ти подскажа че просто трябва да намериш точния html element на който да зададеш default стойност на border, която е :none. Успех и погледни дадения сайт:)

от tsonko_genov (708 точки)


0

Оправих си рамките като направих този клас в CSS и го дадох само на таблиците, на които исках рамки

table.t1{
  border-style:solid;
     border-width:5px;

Рамката на заглавната клетка th ми правеше проблем и видях,че outline с достатъчно голям оffset се препокрие с рамката на голямата таблица:

th.t1{
  outline-style: solid;
  outline-color: grey;
  outline-offset: 2px;
  outline-width: 5px;

Все още не знам как да увелича дебелината на линията на легендата на fieldset-овете, нито пък как да увелича размера на слайдерите. 


от dahaca (90 точки)


0

Най-лесно е да използваш следното:

table, tr, td {border: 3px solid #000};

Ако държиш да е още по-дебел просто променяш стойността на 'рх'-те


от monsterEnergy (954 точки)


0
Прав си, но ако го приложа за всичките елементи, ще стане на мрежа. На мен по условие ми трябват само външните рамки.

от dahaca (90 точки)


1
Здравей, можеш да ползваш <table border="3 или 4 или 5"> :)