How to align texts within an html table

Asked

Viewed 191 times

1

I am trying to make the Brazilian table to exercise the concept of tables I learned.

But when I put the data on victories and defeats they all get disorganized.

table#brasileirao{
	  border: 1px solid black;
	  border-spacing: 0px;
	  margin-left: auto;
	  margin-right: auto;
	  width: 600px;
    }

table#brasileirao td{
	  border:1px solid black;
	  padding: 10px;
}
<table id="brasileirao">
	 <tr><td>Clube</td><td>P V E D GP GC SG</td></tr>
	 <tr><td>Flamengo</td><td>1 2 3 4 5 6 7</td></tr>
	 <tr><td>Flamengo</td><td>1 2 3 4 5 6 7</td></tr>
</table>

How I wanted you to stay:

Como eu queria que ficasse

1 answer

0


To get good even you have to separate each of these values in a TD, so you have a better control of the alignment of the items within the cells and the width of cells.

Notice I used the class table-layout:fixed, this helps to make the width of the TD more uniform, and used text-aling:center to align the content within the TD. I left the clubs TD with 50% of the table width, and the other data I left for the table-layout:fixed also divide the width of the remaining Tds.

See the result:

table#brasileirao {
  /* border: 1px solid black; */
  border-spacing: 0px;
  margin-left: auto;
  margin-right: auto;
  width: 600px;
  table-layout: fixed;
}

table#brasileirao td {
  /* border: 1px solid black; */
  padding: 10px;
}
td:nth-child(1) {
  width: 50%;
  text-align: left;
}
td {
  text-align: center;
}
td {
  border-bottom: 1px solid black;
}
<table id="brasileirao">
<tr>
  <td>Clube</td>
  <td>P</td>
  <td>V</td>
  <td>E</td>
  <td>D</td>
  <td>GP</td>
  <td>GC</td>
  <td>SG</td>
</tr>
<tr>
  <td>Flamengo</td>
  <td>1</td>
  <td>2</td>
  <td>3</td>
  <td>4</td>
  <td>5</td>
  <td>6</td>
  <td>7</td>
</tr>
<tr>
  <td>Flamengo</td>
  <td>1</td>
  <td>2</td>
  <td>3</td>
  <td>4</td>
  <td>5</td>
  <td>6</td>
  <td>7</td>
</tr>
</table>

Browser other questions tagged

You are not signed in. Login or sign up in order to post.