Форматирование таблицы HTML с выравниванием по левому краю

#html #css #html-table

#HTML #css #html-таблица

Вопрос:

Я пытаюсь отформатировать таблицу в HTML, но, похоже, у меня не получается заставить ее работать. Я хочу, чтобы все было выровнено по левому краю и размер шрифта составлял 125%. Заголовок должен быть синим, в то время как все остальное должно быть черным.

На данный момент текст в таблице будет полностью черным, но правильного размера. Заголовок не выровнен по левому краю, а вместо этого имеет, казалось бы, случайные вкладки между ними. Я внес некоторые изменения в th, которые по какой-то причине повлияют на всю таблицу. Однако, похоже, я не могу это воспроизвести (забыл, как я это сделал).

Вот мой код:

 <!DOCTYPE html PUBLIC '-//W3C//DTD HTML 4.01 Transitional//EN'>
<html>

<head>
<style type='text/css'> 
p {margin: 0em 0 0em 0;}
th {color: blue; text-align: left;}
tr {color: black;text-align: left;}
table {font-size:125%;}
</style>
<meta content='text/html; charset=ISO-8859-1'http-equiv='content-type'> 
<title>Test Results</title> 
</head> 

<body>
<table>
<th>
  <td>Test</td>
  <td>Status</td>
  <td>DateTime</td>
  <td>Blank Lines</td> 
</th>
<tr>
  <td>TestNameHere</td>
  <td>PASSEd</td>
  <td>20140730 15:13:13</td>
  <td>1,3,5,2,7,9</td>
</tr>
</table> 
</body>
</html>
  

Я все еще новичок в этом, но форматирование, кажется, соответствует всему, что я видел онлайн. Я попытался перевести цвета в шестнадцатеричный формат, но это ничего не изменило.

Комментарии:

1. Вы используете <th> неправильно. Это должно быть <tr><th></th><th></th><th></th>etc...</tr>

2. как говорит MLeFerve, th должно быть вместо td не tr w3.org/wiki/HTML/Elements/th

Ответ №1:

Это работает на скрипке

HTML

 <table>
<tr>
  <th>Test</th>
  <th>Status</th>
  <th>DateTime</th>
  <th>Blank Lines</th> 
</tr>
<tr>
  <td>TestNameHere</td>
  <td>PASSEd</td>
  <td>20140730 15:13:13</td>
  <td>1,3,5,2,7,9</td>
</tr>
</table> 
  

CSS

 p {margin: 0em 0 0em 0;}
th {color: blue; text-align: left;}
tr {color: black;text-align: left;}
table {font-size:125%;}
  

ваша проблема заключалась в том, что вы использовали <th> вместо <tr> и там, где вы должны указать <th> заголовок, вы указали <td>

Комментарии:

1. действительно, это так! Спасибо. И да, я думал, <th> завернул <td> ‘s

2. да, это просто заставляет меня ждать 10 минут :/