Изменение ширины столбца

Теперь, когда вы использовали всю правильную семантику, вы можете изменить ширину каждого столбца - на данный момент каждый столбец имеет ширину 33%. Допустим, мы хотим, чтобы первый столбец составлял 40% таблицы, а два оставшихся столбца - 30% (например, 40% + 30% + 30% = 100%).

Чтобы сделать это, мы используем <col>. Этот элемент должен быть расположен между <table> и <thead>, и мы используем атрибут стиля, чтобы определить ширину столбцов. <col> является самозакрывающимся элементом, и он нужен для каждого столбца таблицы. Давайте изучим пример:

<table border="1" width="100%">
	<col style="width:40%">
	<col style="width:30%">
	<col style="width:30%">
	<thead>
	<tr>
		<th>Fruits</th>
		<th>Vitamin A</th>
		<th>Vitamin C</th>
	</tr>
	</thead>
	<tbody>
	<tr>
		<th>Apples</th>
		<td>98 ui</td>
		<td>8.4 mg</td>
	</tr>
	<tr>
		<th>Oranges</th>
		<td>295 ui</td>
		<td>69.7 mg</td>
	</tr>
	<tr>
		<th>Bananas</th>
		<td>76 ui</td>
		<td>10.3 mg</td>
	</tr>
	</tbody>
</table>

Таким образом, вы можете контролировать ширину столбцов таблицы. В качестве примера я использовала атрибут style и значение width: 40%, но в идеале это должно быть в файле стилей, так как это имеет отношение к внешнему виду и не имеет отношения к семантике.

Если бы вы использовали свою таблицу стилей, вы могли бы создать три класса, в которых вы определили ширину каждого столбца, и тогда ваша разметка будет выглядеть примерно так:

<table border="1">
	<col class="column-one">
	<col class="column-two">
	<col class="column-three">
	<thead>
	<tr>
		<th>Fruits</th>
		<th>Vitamin A</th>

Чему вы научились

• Каждая таблица начинается и заканчивается элементом <table>
• Вы используете атрибуты colspan и rowspan для объединения ячеек
• Таблица делится на заголовок (<thead>) и тело (the <tbody>)
• Внутри головы и тела таблица разделена на строки, используя <tr>
• Вы не определяете столбцы в таблицах HTML, но вместо этого используете <td> элемент для определения отдельных ячеек данных
• Когда вам нужно определить ячейку заголовка, используйте <th> вместо<td>