Scribd
Upload
10 views6 pages

Ejercicio 1

The document contains the code for generating a chessboard table using HTML and CSS. The table has 8 rows and 8 columns with alternating black and white squares. The CSS styles the table to have collapsible borders, sets widths and heights for cells, centers text, and defines color classes for the black and white squares. The HTML includes a table with a header, body and footer that uses a modulo operation to dynamically assign classes to alternate the square colors.

Uploaded by

DARIO DIAZ
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
10 views6 pages

Ejercicio 1

The document contains the code for generating a chessboard table using HTML and CSS. The table has 8 rows and 8 columns with alternating black and white squares. The CSS styles the table to have collapsible borders, sets widths and heights for cells, centers text, and defines color classes for the black and white squares. The HTML includes a table with a header, body and footer that uses a modulo operation to dynamically assign classes to alternate the square colors.

Uploaded by

DARIO DIAZ
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 6

Ejercicio 1

Ejercicio 2
<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>Tablero de Ajedrez</title>

<style>

/* Corregido: el código CSS se encuentra dentro de las etiquetas <style> */

/* y se cerró con </style> */


table {

border-collapse: collapse;

margin: 20px;

td {

width: 50px;

height: 50px;

text-align: center;

font-size: 24px;

font-weight: bold;

.blanco {

background-color: #FFFFFF;

.negro {

background-color: #808080;

color: #FFFFFF;

th {

width: 50px;

height: 50px;

text-align: center;

font-size: 24px;

font-weight: bold;

</style>

</head>
<body>

<h1>Tablero de Ajedrez</h1>

<table>

<thead>

<tr>

<th></th>

<th>a</th>

<th>b</th>

<th>c</th>

<th>d</th>

<th>e</th>

<th>f</th>

<th>g</th>

<th>h</th>

<th></th>

</tr>

</thead>

<tbody>

<% for(int f=8; f>=1; f--) { %>

<tr>

<th><%=f %></th>

<% for(int c=1; c<=8; c++) { %>

<td class="<%= (f+c)%2 == 0 ? "blanco" : "negro" %>"></td>

<% } %>

<th><%=f %></th>

</tr>

<% } %>

</tbody>

<tfoot>

<tr>
<th></th>

<th>h</th>

<th>g</th>

<th>f</th>

<th>e</th>

<th>d</th>

<th>c</th>

<th>b</th>

<th>a</th>

<th></th>

</tr>

</tfoot>

</table>

</body>

</html>
S

You might also like