table {
/* расстояние между ячейками */
border-spacing: 20px 10px;
/* делаю границу между ячейками одинарной */
border-collapse: collapse; /* separate - по умолчанию */
width: 300px;
/* двигаю таблицу направо с помощью левого внешнего отступа */
margin-left: calc(50% - 150px);
}
th,
td {
/* рисуем для каждой ячейки свою границу */
border: 2px solid #090;
/* отодвигаем содержимое ячейки от границы ячейки внутренним отступом: top - right - bottom - left */
padding: 8px 0 0 8px;
font-weight: normal;
}
.knopki {
padding: 8px;
cursor: pointer;
}
textarea {
width: 97;
height: 65;
resize: none;
}
input,
select,
fieldset,
textarea {
margin-bottom: 8px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Формы</title>
<style>
</style>
</head>
<body>
<form action='#' method='get'>
<table>
<caption>Закажите сайт</caption>
<tr>
<th align='left'>Ваше имя
<th align='left'><input type='text' name='text' maxlength='8' placeholder=''><br>
<tr>
<td>Ваш e-mail
<td><input type='text' name='text' maxlength='8' placeholder=''><br>
<tr>
<td>Кол-во страниц
<td>
<select name='mySelect'>
<option value=''><5
<option value=''>5-10
<option value=''>>10
</select><br>
<tr>
<td colspan='2'>
<fieldset>
<legend>Версия языка HTML</legend>
<p><input type='radio' name='pet'>HTML 5<br>
<input type='radio' name='pet' checked>HTML 4.01<br>
<input type='radio' name='pet' checked>XHTML 1.1</p>
</fieldset>
<tr>
<td colspan='2'>
<fieldset>
<legend>Дополнительные параметры</legend>
<p>
<input type='checkbox' checked> Слайдшоу<br>
<input type='checkbox'> Мобильная версия<br>
<input type='checkbox'> Версия для печати<p>
</fieldset>
<tr>
<td colspan='2'><p>Коментарии</br>
<textarea name="comment" cols="30" rows="5"></textarea></p>
<tr>
<td colspan='2'><input class='knopki blue' type='submit' style='display: block; margin: 20px; float: right' value='Сделать заказ'><br>
</table>
</form>
</body>
</html>