How to align text within a table in html

Question

How to align text within a table in html

Navigation

#1 by (0 votes)

1

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

But when I put the data on wins and losses they are all 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:

html css

asked by anonymous 03.09.2018 / 15:01

1 answer

Is there a limit of simultaneous SQLite PHP connection? [closed] transfer a text separately a text found inside a textbox

score 0 · Accepted Answer

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 inside the cells and the width of the cells.

Notice that I used the table-layout:fixed class, this helps to make the DT width more uniform, and I used text-aling:center to align the contents within the TD. I left the TD of the clubs with 50% of the width of the table, and the other data I left to table-layout:fixed equally 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>