使用css将表格数据并排排列在同一张桌子中？

时间：2018-02-20 13:44:46

标签： html css html-table

足球锦标赛表

我有多表数据的表格，如你在html代码下的图片上看到的那样相互排列，但我不明白如何安排（组织）表格行或表格日期表格（抱歉，我不知道） t知道如何正确说出组“A”的表数据放在左边，组“B”的表日期放在组“A”的右边，同样的规则适用于组“D”和组“C”。 我附上了我的代码下的图片。

请使用CSS帮助我这样做，如果不难解释我的解决方案的详细信息。 

table, th, td {
	border: 1px solid #000;
}

table {
	width: 50%;
	border: 4px solid #f1f1f1;
	padding: 5px;
}
<!DOCTYPE html>
<html lang="en">
<head>
	<title>Table tournament</title>
	<meta charset="UTF-8">
</head>
<body>
<table>
	<tr>
		<th>Group <span>A</span></th>
		<th>И</th>
		<th>В</th>
		<th>Н</th>
		<th>П</th>
		<th>Голы</th>
		<th>Очки</th>
	</tr>
	<tr>
		<td>1.Бельгия</td>
		<td>8</td>
		<td>7</td>
		<td>1</td>
		<td>0</td>
		<td>15-2</td>
		<td>22</td>
	</tr>
	<tr>
		<td>2.Хорватия</td>
		<td>8</td>
		<td>5</td>
		<td>2</td>
		<td>1</td>
		<td>11-5</td>
		<td>17</td>
	</tr>
	<tr>
		<td>3.Сербия</td>
		<td>9</td>
		<td>3</td>
		<td>2</td>
		<td>4</td>
		<td>13-10</td>
		<td>11</td>
	</tr>
	<tr>
		<td>4.Шотландия</td>
		<td>9</td>
		<td>2</td>
		<td>2</td>
		<td>5</td>
		<td>6-12</td>
		<td>8</td>
	</tr>
	<tr>
		<td>5.Македония</td>
		<td>8</td>
		<td>2</td>
		<td>1</td>
		<td>5</td>
		<td>6-10</td>
		<td>6</td>
	</tr>
	<tr>
		<td>6.Уэльс</td>
		<td>8</td>
		<td>2</td>
		<td>0</td>
		<td>6</td>
		<td>7-19</td>
		<td>6</td>
	</tr>
	<tr>
		<th>Group <span>В</span></th>
		<th>И</th>
		<th>В</th>
		<th>Н</th>
		<th>П</th>
		<th>Голы</th>
		<th>Очки</th>
	</tr>
	<tr>
		<td>1.Италия</td>
		<td>8</td>
		<td>6</td>
		<td>2</td>
		<td>0</td>
		<td>15-5</td>
		<td>20</td>
	</tr>
	<tr>
		<td>2.Болгария</td>
		<td>8</td>
		<td>3</td>
		<td>4</td>
		<td>1</td>
		<td>13-6</td>
		<td>13</td>
	</tr>
	<tr>
		<td>3.Дания</td>
		<td>8</td>
		<td>3</td>
		<td>3</td>
		<td>2</td>
		<td>9-10</td>
		<td>12</td>
	</tr>
	<tr>
		<td>4.Чехия</td>
		<td>8</td>
		<td>2</td>
		<td>3</td>
		<td>3</td>
		<td>8-8</td>
		<td>9</td>
	</tr>
	<tr>
		<td>5.Армения</td>
		<td>8</td>
		<td>3</td>
		<td>0</td>
		<td>5</td>
		<td>8-10</td>
		<td>9</td>
	</tr>
	<tr>
		<td>6.Мальта</td>
		<td>8</td>
		<td>1</td>
		<td>0</td>
		<td>7</td>
		<td>4-18</td>
		<td>3</td>
	</tr>
	<tr>
		<th>Group <span>С</span></th>
		<th>И</th>
		<th>В</th>
		<th>Н</th>
		<th>П</th>
		<th>Голы</th>
		<th>Очки</th>
	</tr>
	<tr>
		<td>1.Германия</td>
		<td>8</td>
		<td>7</td>
		<td>1</td>
		<td>0</td>
		<td>28-7</td>
		<td>22</td>
	</tr>
	<tr>
		<td>2.Швеция</td>
		<td>8</td>
		<td>5</td>
		<td>2</td>
		<td>1</td>
		<td>14-8</td>
		<td>17</td>
	</tr>
	<tr>
		<td>3.Австрия</td>
		<td>8</td>
		<td>4</td>
		<td>2</td>
		<td>2</td>
		<td>16-8</td>
		<td>14</td>
	</tr>
	<tr>
		<td>4.Ирландия</td>
		<td>8</td>
		<td>3</td>
		<td>2</td>
		<td>3</td>
		<td>13-13</td>
		<td>11</td>
	</tr>
	<tr>
		<td>5.Казахстан</td>
		<td>8</td>
		<td>1</td>
		<td>1</td>
		<td>6</td>
		<td>4-17</td>
		<td>4</td>
	</tr>
	<tr>
		<td>6.Фарерские о.</td>
		<td>8</td>
		<td>0</td>
		<td>0</td>
		<td>8</td>
		<td>3-25</td>
		<td>0</td>
	</tr>
	<tr>
		<th>Group <span>D</span></th>
		<th>И</th>
		<th>В</th>
		<th>Н</th>
		<th>П</th>
		<th>Голы</th>
		<th>Очки</th>
	</tr>
	<tr>
		<td>1.Нидерланды</td>
		<td>8</td>
		<td>7</td>
		<td>1</td>
		<td>0</td>
		<td>24-4</td>
		<td>22</td>
	</tr>
	<tr>
		<td>2.Венгрия</td>
		<td>8</td>
		<td>4</td>
		<td>2</td>
		<td>2</td>
		<td>18-12</td>
		<td>14</td>
	</tr>
	<tr>
		<td>3.Турция</td>
		<td>8</td>
		<td>4</td>
		<td>1</td>
		<td>3</td>
		<td>14-7</td>
		<td>13</td>
	</tr>
	<tr>
		<td>4.Румыния</td>
		<td>8</td>
		<td>4</td>
		<td>1</td>
		<td>3</td>
		<td>13-12</td>
		<td>13</td>
	</tr>
	<tr>
		<td>5.Эстония</td>
		<td>8</td>
		<td>2</td>
		<td>1</td>
		<td>5</td>
		<td>6-16</td>
		<td>7</td>
	</tr>
	<tr>
		<td>Андорра</td>
		<td>8</td>
		<td>0</td>
		<td>0</td>
		<td>8</td>
		<td>0-24</td>
		<td>0</td>
	</tr>
</table>
</body>
</html>

非常感谢任何帮助。 此图像演示了如何将td与td并排排列。

tournament football table

1 个答案:

答案 0 :(得分：0)





    table, th, td {
    	border: 1px solid #000;
    }

    table {
    	width: 50%;
    	border: 4px solid #f1f1f1;
    	padding: 5px;
    }


    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<title>Table tournament</title>
    	<meta charset="UTF-8">
    </head>
    <body>
    <table>
<tr>
<td>
    	
<table>
<tr>
    		<th>Group <span>A</span></th>
    		<th>И</th>
    		<th>В</th>
    		<th>Н</th>
    		<th>П</th>
    		<th>Голы</th>
    		<th>Очки</th>
    	</tr>
    	<tr>
    		<td>1.Бельгия</td>
    		<td>8</td>
    		<td>7</td>
    		<td>1</td>
    		<td>0</td>
    		<td>15-2</td>
    		<td>22</td>
    	</tr>
    	<tr>
    		<td>2.Хорватия</td>
    		<td>8</td>
    		<td>5</td>
    		<td>2</td>
    		<td>1</td>
    		<td>11-5</td>
    		<td>17</td>
    	</tr>
    	<tr>
    		<td>3.Сербия</td>
    		<td>9</td>
    		<td>3</td>
    		<td>2</td>
    		<td>4</td>
    		<td>13-10</td>
    		<td>11</td>
    	</tr>
    	<tr>
    		<td>4.Шотландия</td>
    		<td>9</td>
    		<td>2</td>
    		<td>2</td>
    		<td>5</td>
    		<td>6-12</td>
    		<td>8</td>
    	</tr>
    	<tr>
    		<td>5.Македония</td>
    		<td>8</td>
    		<td>2</td>
    		<td>1</td>
    		<td>5</td>
    		<td>6-10</td>
    		<td>6</td>
    	</tr>
    	<tr>
    		<td>6.Уэльс</td>
    		<td>8</td>
    		<td>2</td>
    		<td>0</td>
    		<td>6</td>
    		<td>7-19</td>
    		<td>6</td>
    	</tr>
</table>
</td>
<td>

    	<table>
           <tr>
    		<th>Group <span>В</span></th>
    		<th>И</th>
    		<th>В</th>
    		<th>Н</th>
    		<th>П</th>
    		<th>Голы</th>
    		<th>Очки</th>
    	</tr>
    	<tr>
    		<td>1.Италия</td>
    		<td>8</td>
    		<td>6</td>
    		<td>2</td>
    		<td>0</td>
    		<td>15-5</td>
    		<td>20</td>
    	</tr>
    	<tr>
    		<td>2.Болгария</td>
    		<td>8</td>
    		<td>3</td>
    		<td>4</td>
    		<td>1</td>
    		<td>13-6</td>
    		<td>13</td>
    	</tr>
    	<tr>
    		<td>3.Дания</td>
    		<td>8</td>
    		<td>3</td>
    		<td>3</td>
    		<td>2</td>
    		<td>9-10</td>
    		<td>12</td>
    	</tr>
    	<tr>
    		<td>4.Чехия</td>
    		<td>8</td>
    		<td>2</td>
    		<td>3</td>
    		<td>3</td>
    		<td>8-8</td>
    		<td>9</td>
    	</tr>
    	<tr>
    		<td>5.Армения</td>
    		<td>8</td>
    		<td>3</td>
    		<td>0</td>
    		<td>5</td>
    		<td>8-10</td>
    		<td>9</td>
    	</tr>
    	<tr>
    		<td>6.Мальта</td>
    		<td>8</td>
    		<td>1</td>
    		<td>0</td>
    		<td>7</td>
    		<td>4-18</td>
    		<td>3</td>
    	</tr>
</table>
</td>
</tr>
<tr>
<td>
<table>    
	<tr>
    		<th>Group <span>С</span></th>
    		<th>И</th>
    		<th>В</th>
    		<th>Н</th>
    		<th>П</th>
    		<th>Голы</th>
    		<th>Очки</th>
    	</tr>
    	<tr>
    		<td>1.Германия</td>
    		<td>8</td>
    		<td>7</td>
    		<td>1</td>
    		<td>0</td>
    		<td>28-7</td>
    		<td>22</td>
    	</tr>
    	<tr>
    		<td>2.Швеция</td>
    		<td>8</td>
    		<td>5</td>
    		<td>2</td>
    		<td>1</td>
    		<td>14-8</td>
    		<td>17</td>
    	</tr>
    	<tr>
    		<td>3.Австрия</td>
    		<td>8</td>
    		<td>4</td>
    		<td>2</td>
    		<td>2</td>
    		<td>16-8</td>
    		<td>14</td>
    	</tr>
    	<tr>
    		<td>4.Ирландия</td>
    		<td>8</td>
    		<td>3</td>
    		<td>2</td>
    		<td>3</td>
    		<td>13-13</td>
    		<td>11</td>
    	</tr>
    	<tr>
    		<td>5.Казахстан</td>
    		<td>8</td>
    		<td>1</td>
    		<td>1</td>
    		<td>6</td>
    		<td>4-17</td>
    		<td>4</td>
    	</tr>
    	<tr>
    		<td>6.Фарерские о.</td>
    		<td>8</td>
    		<td>0</td>
    		<td>0</td>
    		<td>8</td>
    		<td>3-25</td>
    		<td>0</td>
    	</tr>
</table>
</td>
<td>
<table>
    	<tr>
    		<th>Group <span>D</span></th>
    		<th>И</th>
    		<th>В</th>
    		<th>Н</th>
    		<th>П</th>
    		<th>Голы</th>
    		<th>Очки</th>
    	</tr>
    	<tr>
    		<td>1.Нидерланды</td>
    		<td>8</td>
    		<td>7</td>
    		<td>1</td>
    		<td>0</td>
    		<td>24-4</td>
    		<td>22</td>
    	</tr>
    	<tr>
    		<td>2.Венгрия</td>
    		<td>8</td>
    		<td>4</td>
    		<td>2</td>
    		<td>2</td>
    		<td>18-12</td>
    		<td>14</td>
    	</tr>
    	<tr>
    		<td>3.Турция</td>
    		<td>8</td>
    		<td>4</td>
    		<td>1</td>
    		<td>3</td>
    		<td>14-7</td>
    		<td>13</td>
    	</tr>
    	<tr>
    		<td>4.Румыния</td>
    		<td>8</td>
    		<td>4</td>
    		<td>1</td>
    		<td>3</td>
    		<td>13-12</td>
    		<td>13</td>
    	</tr>
    	<tr>
    		<td>5.Эстония</td>
    		<td>8</td>
    		<td>2</td>
    		<td>1</td>
    		<td>5</td>
    		<td>6-16</td>
    		<td>7</td>
    	</tr>
    	<tr>
    		<td>Андорра</td>
    		<td>8</td>
    		<td>0</td>
    		<td>0</td>
    		<td>8</td>
    		<td>0-24</td>
    		<td>0</td>
    	</tr>
</table>
</td>
</tr>
    </table>
    </body>
    </html>
相关问题
最新问题