HTML форматирование текста

Question

У меня есть html-сайт. Я использую Dreamweaver. Чтобы сделать раздел в статье, я использовал таблицы для размещения текста и изображения. Но таблицы не округлены, как хотелось. Поэтому я публикую это, чтобы вы могли рассказать мне, что является правильным кодом для достижения того, что показывает изображение.

image: слева это то, что я хотел бы сделать. Справа вы увидите элементы, которые я буду использовать. Поэтому я хочу, чтобы средние элементы повторялись, чтобы сформировать фон. Но я хочу также, чтобы этот фон таблицы мог иметь текст (например, на изображении).

Answer 1

Таблицы не должны использоваться для построения макета. Таким образом, правильным способом будет использовать то <div>:

HTML:

<div class="article"> 
    <h1>Title</h1> 
    <div> 
     <img src="a.jpg"> 
     <p> 
      Lorem ipsum dolor sit amet. 
     </p> 
    </div> 
</div> 

CSS:

div.article { 
    /* Shadow around the whole box */ 
    -webkit-box-shadow: 0px 0px 5px black; 

    /* Repeat rounder borders here, so shadow will be rounded as well */ 
    border-top-left-radius: 10px; 
    border-top-right-radius: 10px; 
} 

img { 
    width: 100%; 
} 

h1 { 
    margin: 0; 
    border-top-left-radius: 10px; 
    border-top-right-radius: 10px; 

    /* Background gradient. In browser with no gradient support, fallback to orange */ 
    background: orange; 
    background: -webkit-linear-gradient(90deg, orange, yellow); 
} 

div.article > div { 
    padding: 10px; 
    background-color: gray; 
} 

JSFiddle with example.

Примечание: этот пример будет отображать тень и градиент в браузере Chrome/Safari (и других веб-браузерах) только потому, что для простоты я пропустил префиксы других поставщиков. Добавьте их в ту же поддержку других браузеров.

Answer 2

<style> 
table#yourtableid tr:first-of-type { 
-webkit-border-radius: 20px 20px 0px 0px; 
    border-radius: 20px 20px 0px 0px; 
} 
</style> 

Дает радиус границы 20px в верхнем левом и верхнем правом углах указанной таблицы.