За последние 24 часа нас посетили 43802 программиста и 1814 роботов. Сейчас ищут 792 программиста ...

узоры на границах таблицы

Тема в разделе "HTML и CSS", создана пользователем Ter, 21 июл 2011.

  1. Ter

    Ter Активный пользователь

    С нами с:
    5 июн 2011
    Сообщения:
    67
    Симпатии:
    0
    собственно хотел бы узнать, как сделать разные красивые границы у таблицы(не ксс типа dased), например таблица, а граница у неё как у марки(острые полутреугольники) и т.д. и т.п. Пробовал вставлять как фон в ячейки, но те оставляют пробелы...
     
  2. Gromo

    Gromo Активный пользователь

    С нами с:
    24 май 2010
    Сообщения:
    2.786
    Симпатии:
    2
    Адрес:
    Ташкент
    попробуй вставить стили

    [css]
    <style type="text/css">
    table {
    border-collapse: collapse;
    border-spacing: 0;
    }
    </style>
    [/css]

    и после этого сделать фоновый рисунок у подложки таблицы. для подложки можно использовать див с фоном, паддингом, а у самой таблицы выставить фон белый.
     
  3. Ter

    Ter Активный пользователь

    С нами с:
    5 июн 2011
    Сообщения:
    67
    Симпатии:
    0
    хорошо, попробую.
     
  4. Ter

    Ter Активный пользователь

    С нами с:
    5 июн 2011
    Сообщения:
    67
    Симпатии:
    0
    что-то не так вообще не получается, можете показать на примере?
    вот мой код
    HTML:
    1.  
    2. <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
    3. <title>Шаблон №3</title>
    4. <link rel="stylesheet" href="style.css" type="text/css">
    5. </head>
    6. <table width="35%" height="75" class="news">
    7. <tr><td></td></tr></table>
    8.  
    9. <table width="100" height="150" class="picture">
    10. <tr><td><div id="picture-top"><br></div></td></tr>
    11. <tr><td><div id="picture-left"></div></td><td height="50">ololo</td><td><div id="picture-right"></div></td></tr>
    12. <tr><td><div id="picture-bottom"><br></div></td></tr></table>
    13.  
    14. <table width="50%" height="500" class="articles">
    15. <tr><td></td></tr></table>
    16.  
    17. <table width="10%" height="200" class="add">
    18. <tr><td></td></tr></table>
    19.  
    20. <table width="10%" height="75" class="persona">
    21. <tr><td></td></tr></table>
    22.  
    23. </html>
    24.  
    ксс
    [css]
    .picture{
    background: beige;
    box-shadow: 0 0 5px black;
    box-shadow: 0 0 10px rgba(0,0,0,0.5);
    -moz-box-shadow: 0 0 10px rgba(0,0,0,0.5);
    -webkit-box-shadow: 0 0 10px rgba(0,0,0,0.5);
    border-collapse: collapse;
    border-spacing: 0;
    position:absolute; top:100px; left:5%;}
    #picture-top{ background:url(images/picture-top.png);}
    #picture-bottom{ background:url(images/picture-bottom.png);}
    [/css]
     
  5. Ter

    Ter Активный пользователь

    С нами с:
    5 июн 2011
    Сообщения:
    67
    Симпатии:
    0
    нужно например чтоб была таблица, в ней что-то(картинка) и вместо обычных границ например поставить рамку и пр...
     
  6. Gromo

    Gromo Активный пользователь

    С нами с:
    24 май 2010
    Сообщения:
    2.786
    Симпатии:
    2
    Адрес:
    Ташкент
    HTML:
    1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    2.   <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
    3.   <title>TEST</title>
    4.   <style type="text/css">
    5.     table {
    6.       border-collapse: collapse;
    7.       border-spacing: 0;
    8.     }
    9.     #table_border {
    10.       background: transparent url('bg.jpg');
    11.       padding: 4px;
    12.       width: 200px;
    13.     }
    14.   </style>
    15. </head>
    16. <div id="table_border">
    17.   <table style="width: 100%; background-color: white;">
    18.     <tr>
    19.       <td>1</td>
    20.       <td>2</td>
    21.     </tr>
    22.     <tr>
    23.       <td>3</td>
    24.       <td>4</td>
    25.     </tr>
    26.   </table>
    27. </div>
    28. </body>
    29. </html>
     
  7. Ter

    Ter Активный пользователь

    С нами с:
    5 июн 2011
    Сообщения:
    67
    Симпатии:
    0
    спасибо, теперь понятно =)
     
  8. Sofia

    Sofia Активный пользователь

    С нами с:
    25 сен 2008
    Сообщения:
    969
    Симпатии:
    2
    а вот имеется таблица <table> как мне сделать фоновую картинку вместо левого бортика и правого border-right-style: и border-left-style. Хочется своб картинку узенькую и чтоб была в виде фона вдоль всего бортика, к примеру квадратики а картинка cube.png
     
  9. Gromo

    Gromo Активный пользователь

    С нами с:
    24 май 2010
    Сообщения:
    2.786
    Симпатии:
    2
    Адрес:
    Ташкент
    Sofia
    достаточно для подложки дива поставить padding: 0 4px;
     
  10. Sofia

    Sofia Активный пользователь

    С нами с:
    25 сен 2008
    Сообщения:
    969
    Симпатии:
    2
    Gromo я не могу див поставить. Для таблицы можно сделать?
     
  11. Gromo

    Gromo Активный пользователь

    С нами с:
    24 май 2010
    Сообщения:
    2.786
    Симпатии:
    2
    Адрес:
    Ташкент
    Sofia
    как так ? используй див в качестве подложки для таблицы - и будет тебе счастье.
    возможно есть и другие пути решения данной задачи, но сходу ничего придумать больше не получается
     
  12. GudGuy

    GudGuy Активный пользователь

    С нами с:
    14 июн 2007
    Сообщения:
    909
    Симпатии:
    0
    Адрес:
    Москва
    какой вопрос, такой и ответ
    HTML:
    1. <tr>
    2. <td width=1px colspan=3>
    3. </td>
    4. <tr>
    5. <td width=1px>
    6.  
    7. </td>
    8. <td>
    9. content
    10. </td>
    11. <td width=1px>
    12. </tr>
    13. <tr>
    14. <td width=1px colspan=3>
    15. </td>
    <tr>
     
  13. Sofia

    Sofia Активный пользователь

    С нами с:
    25 сен 2008
    Сообщения:
    969
    Симпатии:
    2
    GudGuy т.е. рисунок я поставить не могу шириной в 3px?
     
  14. sobachnik

    sobachnik Старожил

    С нами с:
    20 апр 2007
    Сообщения:
    3.380
    Симпатии:
    13
    Адрес:
    Дмитров, МО
    HTML:
    1.     <tr>
    2.         <td>
    3.             <img src="top-left-angle.gif" />
    4.         </td>
    5.         <td>
    6.             <img src="top-border.gif" />
    7.         </td>
    8.         <td>
    9.             <img src="top-right-angle.gif" />
    10.         </td>
    11.     </tr>
    12.     <tr>
    13.         <td>
    14.             <img src="left-border.gif" />
    15.         </td>
    16.         <td>
    17.             Cell with data
    18.         </td>
    19.         <td>
    20.             <img src="right-border.gif" />
    21.         </td>
    22.     </tr>
    23.     <tr>
    24.         <td>
    25.             <img src="bottom-left-angle.gif" />
    26.         </td>
    27.         <td>
    28.             <img src="bottom-border.gif" />
    29.         </td>
    30.         <td>
    31.             <img src="bottom-right-angle.gif" />
    32.         </td>
    33.     </tr>
    :)
     
  15. GudGuy

    GudGuy Активный пользователь

    С нами с:
    14 июн 2007
    Сообщения:
    909
    Симпатии:
    0
    Адрес:
    Москва
    Sofia
    Можете. Поменяв ширину колонку. Можно как sobachnik вставить изображения, а можно указть размеры ячеек. (в первой и последней строке height, конечно, а не width).
    А вообще, вспоминая ваше фееричное появление на форуме и жажду всем и всё доказать... За ТРИ года можно было бы выучить ХОТЯ БЫ ............<вырезано ради спокойствия модераторов>....................!
    Если кратко - я разочарован. А Олег был прав. Но, как он часто говаривал, nobody cares.
     
  16. Sofia

    Sofia Активный пользователь

    С нами с:
    25 сен 2008
    Сообщения:
    969
    Симпатии:
    2
    GudGuy спасибо за спам. Очень помогло. Вы как всегда в тему.